/*
Theme Name: K3Bxn Store
Description: The K3Bxn Expert Advisor shop: home page, catalogue, product pages, Brokers and VPS pages, documentation and the customer dashboard. Built for WooCommerce and the K3Bxn Licensing Connector. Light and dark appearance, with the logo to match. Brand colours (gold and teal) are the custom properties at the top of this file and can also be changed under Appearance > Customize.
Version: 1.5.5
Requires at least: 6.5
Requires PHP: 8.1
Author: K3Bxn
License: Proprietary
Text Domain: k3store
*/

:root {
	/* teal: the brand's ground colour */
	--brand: #0c7c80;        /* filled buttons, badges and icons */
	--link: var(--brand);    /* links and eyebrows: the same teal on a light page, a brighter one on a dark page */
	--brand-bright: #19b8ab;
	--brand-deep: #062a30;   /* header, hero, footer */
	--brand-deep-2: #0a4047;
	/* gold: buttons and highlights */
	--accent: #f0b429;
	--accent-2: #ffd874;
	--accent-deep: #b97f0a;
	--accent-ink: #1d1500;   /* text on gold */
	--accent-soft: #fdf4d6;
	--ink: #0a2227;
	--ink-2: #24444a;
	--mute: #56706f;
	--line: #d9e7e5;
	--paper: #f4f9f8;
	--card: #ffffff;
	--soft: #e8f3f1;
	--ok: #13795b; --warn: #8a5a00; --bad: #b3261e;
	--radius: 14px;
	--wrap: 1180px;
	--shadow: 0 18px 40px -18px #062a3055;
	--font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	/* the header: white with the dark logo on a light page, deep teal with the light logo on a dark page */
	--head-bg: #ffffff; --head-ink: #062a30; --head-link: #24444a; --head-hover: #0c7c8014; --head-line: #d9e7e5; --head-edge: #062a3038; --head-gold: #b47a06;
	--field: #ffffff; --field-line: #b9cfcc;
	--note-ink: #4b3a12; --note-line: #ecd286;
	color-scheme: light;
}
/* Dark appearance. assets/site.js sets data-theme from the visitor's choice, or from their device's setting. */
:root[data-theme="dark"] {
	--link: #35d0c3;
	--accent-deep: #ffd874;
	--accent-soft: #2e2608;
	--ink: #e8f3f1;
	--ink-2: #c2d6d3;
	--mute: #8eaeaa;
	--line: #1c444b;
	--paper: #03161a;
	--card: #0a272d;
	--soft: #0d3138;
	--ok: #35c48f; --warn: #e6b450; --bad: #ff8076;
	--shadow: 0 18px 40px -18px #000000cc;
	--head-bg: var(--brand-deep); --head-ink: #ffffff; --head-link: #dcebe9; --head-hover: #ffffff14; --head-line: #ffffff14; --head-edge: #ffffff55; --head-gold: var(--accent);
	--field: #061c21; --field-line: #2c5a61;
	--note-ink: #f1dfa6; --note-line: #6b5514;
	color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font: 16px/1.6 var(--font); color: var(--ink); background: var(--paper); }
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-underline-offset: 2px; }
a:hover { color: var(--accent-deep); }
h1, h2, h3, h4 { line-height: 1.18; margin: 0 0 .5em; letter-spacing: -.015em; color: var(--ink); }
h1 { font-size: clamp(2rem, 4.6vw, 3.25rem); letter-spacing: -.03em; font-weight: 800; }
h2 { font-size: clamp(1.45rem, 2.8vw, 2.05rem); font-weight: 800; }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 780px; }
.eyebrow { font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--link); margin: 0 0 .6em; display: flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 26px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); flex: none; }
.mute { color: var(--mute); }
.small { font-size: .875rem; }
.screen-reader-text { position: absolute; left: -9999px; }
.skip-link:focus { position: fixed; left: 12px; top: 12px; background: var(--brand-deep); color: #fff; padding: 8px 14px; z-index: 100; }
.gold { background: linear-gradient(92deg, #ffe08a, var(--accent) 35%, #e39d12 65%, #ffe08a); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---- buttons */
.btn, .button, button.button, input.button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .wc-block-components-button {
	display: inline-block; font: 700 .95rem/1.2 var(--font); padding: 12px 22px; border-radius: 999px; border: 2px solid var(--link);
	background: var(--card); color: var(--link); text-decoration: none; cursor: pointer; transition: background .15s, color .15s, border-color .15s, transform .15s, box-shadow .15s; }
.btn:hover, .button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .single_add_to_cart_button, .checkout-button, #place_order {
	background: linear-gradient(180deg, var(--accent-2), var(--accent)) !important; border-color: var(--accent) !important; color: var(--accent-ink) !important; box-shadow: 0 10px 22px -10px #b97f0aaa; }
.btn-primary:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .single_add_to_cart_button:hover, .checkout-button:hover, #place_order:hover {
	background: linear-gradient(180deg, #ffe7a3, var(--accent-2)) !important; border-color: var(--accent-2) !important; color: var(--accent-ink) !important; transform: translateY(-1px); box-shadow: 0 14px 26px -10px #b97f0acc; }
.btn-light { border-color: #ffffff59; background: #ffffff0f; color: #fff; }
.btn-light:hover { background: #fff; border-color: #fff; color: var(--brand-deep); }
.btn-sm { padding: 8px 16px; font-size: .875rem; }
.btn[disabled], .button.disabled, .button:disabled { opacity: .55; cursor: not-allowed; }

/* ---- header */
.site-header { background: var(--head-bg); color: var(--head-ink); position: sticky; top: 0; z-index: 50; box-shadow: 0 1px 0 var(--head-line), 0 10px 30px -22px #000; }
.site-header::after { content: ""; display: block; height: 3px; background: linear-gradient(90deg, var(--brand-bright), var(--accent) 50%, var(--brand-bright)); }
.site-header .wrap { display: flex; align-items: center; gap: 24px; min-height: 70px; }
.brand { font-weight: 800; font-size: 1.5rem; letter-spacing: -.02em; text-decoration: none; color: var(--head-ink); display: flex; align-items: center; gap: 10px; line-height: 1; white-space: nowrap; flex: none; }
.brand:hover { color: var(--head-ink); }
.brand .mark { width: 40px; height: 40px; flex: none; }
/* the name over "EXPERT ADVISORS" (functions.php: k3_logo): "K3" in the header's ink, "Bxn" in the badge's gold,
   the line under it from the badge's teal into gold. Deeper tones on the white header, brighter ones on dark. */
.brand { --wg1: #ffe08a; --wg2: #f2b92e; --wg3: #c98a0c; --wt1: #19b8ab; --wt2: #35d0c3; --wt3: #f0b429; }
:root:not([data-theme="dark"]) .site-header .brand { --wg1: #e3a514; --wg2: #b47a06; --wg3: #8a5a00; --wt1: #0b6f73; --wt2: #0c7c80; --wt3: #b47a06; }
.brand .word { display: block; height: 40px; width: auto; flex: none; overflow: visible; transition: filter .3s ease, height .25s ease; }
.brand .word .wm { font: 800 25px/1 var(--font); fill: currentColor; }
.brand .word .tag { font: 800 7.4px/1 var(--font); }
.brand .wg1 { stop-color: var(--wg1); } .brand .wg2 { stop-color: var(--wg2); } .brand .wg3 { stop-color: var(--wg3); }
.brand .wt1 { stop-color: var(--wt1); } .brand .wt2 { stop-color: var(--wt2); } .brand .wt3 { stop-color: var(--wt3); }
.brand:hover .word { filter: drop-shadow(0 0 6px #f0b42959); }
.brand img { max-height: 44px; width: auto; }
.brand .logo-dark, :root[data-theme="dark"] .brand .logo-light, .site-footer .brand .logo-light { display: none; }
:root[data-theme="dark"] .brand .logo-dark, .site-footer .brand .logo-dark { display: block; }
.nav { margin-right: auto; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
.nav li { position: relative; }
.nav a { display: block; padding: 10px 13px; text-decoration: none; font-weight: 600; border-radius: 8px; color: var(--head-link); white-space: nowrap; }
.nav a:hover, .nav .current-menu-item > a, .nav .current_page_parent > a { background: var(--head-hover); color: var(--head-ink); }
.nav .current-menu-item > a { box-shadow: inset 0 -3px 0 var(--accent); border-radius: 8px 8px 0 0; }
.nav .menu-item-has-children > a::after { content: "\25BE"; margin-left: 6px; font-size: .8em; color: var(--accent); }
.nav ul ul { display: none; position: absolute; left: 0; top: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 8px; min-width: 250px; flex-direction: column; box-shadow: var(--shadow); }
.nav ul ul a { color: var(--ink); }
.nav ul ul a:hover, .nav ul ul .current-menu-item > a { background: var(--soft); color: var(--link); box-shadow: none; border-radius: 8px; }
.nav li:hover > ul, .nav li:focus-within > ul { display: flex; }
.header-tools { display: flex; align-items: center; gap: 6px; }
.header-tools a { text-decoration: none; padding: 9px 14px; border-radius: 999px; font-weight: 600; white-space: nowrap; color: var(--head-link); }
.header-tools a:hover { background: var(--head-hover); color: var(--head-ink); }
.header-tools .login { border: 1.5px solid var(--head-gold); color: var(--head-gold); }
.header-tools .login:hover { background: var(--accent); color: var(--accent-ink); }
.cart-count { display: inline-block; min-width: 20px; text-align: center; background: var(--accent); color: var(--accent-ink); border-radius: 999px; font-size: .75rem; font-weight: 800; padding: 1px 6px; margin-left: 2px; }
.nav-toggle { display: none; background: none; border: 1.5px solid var(--head-edge); color: var(--head-ink); border-radius: 8px; padding: 8px 12px; font: inherit; font-weight: 600; cursor: pointer; }

/* ---- sections */
.section { padding: 72px 0; }
.section-tight { padding: 40px 0; }
.section-soft { background: var(--soft); border-block: 1px solid var(--line); }
.section-dark { background: radial-gradient(900px 420px at 85% -10%, #19b8ab33, transparent 60%), linear-gradient(160deg, var(--brand-deep), #04191d); color: #fff; }
.section-dark h2, .section-dark h3 { color: #fff; }
.section-dark a { color: #fff; }
.section-dark .mute { color: #a9c6c3; }
.section-dark .eyebrow { color: var(--accent); }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.section-head h2 { margin: 0; }
.grid { display: grid; gap: 22px; }
.grid > * { min-width: 0; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.card h3 { margin-bottom: .35em; }
a.card { color: var(--ink); transition: transform .15s, box-shadow .15s, border-color .15s; }
a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--brand-bright); color: var(--ink); }
a.card h3 { color: var(--link); }

/* ---- hero */
.hero { position: relative; overflow: hidden; padding: 84px 0 76px; color: #fff;
	background:
		radial-gradient(720px 420px at 88% 8%, #f0b42930, transparent 62%),
		radial-gradient(900px 520px at 8% 110%, #19b8ab45, transparent 60%),
		linear-gradient(155deg, #073a41 0%, var(--brand-deep) 55%, #041a1e 100%); }
.hero::before { content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none;
	background-image: linear-gradient(#ffffff0a 1px, transparent 1px), linear-gradient(90deg, #ffffff0a 1px, transparent 1px); background-size: 48px 48px;
	-webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%); }
.hero .wrap { position: relative; }
.hero .grid { align-items: center; grid-template-columns: 1.05fr .95fr; gap: 52px; }
.hero h1 { color: #fff; }
.hero .eyebrow { color: var(--accent); }
.hero h1 .eyebrow { line-height: 1.6; letter-spacing: .14em; margin-bottom: 1em; }
.hero p.lead { font-size: 1.16rem; color: #cfe3e0; max-width: 34em; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 26px 0 18px; }
.hero-actions .btn { padding: 14px 26px; font-size: 1rem; }
.hero-actions .btn:not(.btn-primary) { border-color: #ffffff59; background: #ffffff0f; color: #fff; }
.hero-actions .btn:not(.btn-primary):hover { background: #fff; border-color: #fff; color: var(--brand-deep); }
.hero-points { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; color: #b9d3d0; font-size: .92rem; }
.hero-points li::before { content: "\2713"; color: var(--accent); font-weight: 800; margin-right: 7px; }
.hero-art { border-radius: 20px; overflow: hidden; border: 1px solid #ffffff24; background: #04191d; aspect-ratio: 16 / 10; box-shadow: 0 40px 80px -40px #000, 0 0 0 6px #ffffff08; }
.hero-art img, .hero-art svg { width: 100%; height: 100%; object-fit: cover; }

/* ---- the strip of facts under the hero */
.facts-strip { background: var(--card); border-bottom: 1px solid var(--line); }
.facts-strip .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fact { padding: 22px 18px; display: flex; gap: 14px; align-items: center; border-left: 1px solid var(--line); }
.fact:first-child { border-left: 0; padding-left: 0; }
.fact .ico { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(140deg, var(--brand-bright), var(--brand)); color: #fff; }
.fact .ico svg { width: 22px; height: 22px; }
.fact strong { display: block; line-height: 1.25; }
.fact span { color: var(--mute); font-size: .875rem; }

/* ---- badges and chips */
.badge { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .04em; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--soft); color: var(--ink-2); white-space: nowrap; }
.badge-solid { background: var(--brand); border-color: var(--brand); color: #fff; }
.badge-soon { border-style: dashed; border-color: var(--mute); background: transparent; color: var(--mute); font-weight: 700; }
.badge-live { background: var(--ok); border-color: var(--ok); color: #fff; }
.badge-test { background: var(--accent-soft); border-color: var(--note-line); color: var(--note-ink); }
.badge-gold { background: linear-gradient(180deg, var(--accent-2), var(--accent)); border-color: var(--accent); color: var(--accent-ink); }
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }

/* ---- product cards */
.products { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.products::before, .products::after { content: none !important; }
.woocommerce ul.products li.product, .products li.product { width: auto !important; float: none !important; margin: 0 !important; }
.ea-card { position: relative; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; height: 100%; transition: box-shadow .18s, transform .18s, border-color .18s; }
.ea-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--brand-bright), var(--accent)); z-index: 1; }
.ea-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); border-color: var(--brand-bright); }
.ea-card .thumb { aspect-ratio: 16 / 10; background: var(--brand-deep); display: block; }
.ea-card .thumb img, .ea-card .thumb svg { width: 100%; height: 100%; object-fit: cover; }
.ea-card .body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ea-card h3 { margin: 0; font-size: 1.25rem; }
.ea-card h3 a { text-decoration: none; color: var(--ink); }
.ea-card h3 a:hover { color: var(--link); }
.ea-card .facts { color: var(--mute); font-size: .875rem; margin: 0; }
.ea-card .desc { margin: 4px 0; color: var(--ink-2); }
.ea-card .evidence { font-size: .875rem; color: var(--ink-2); margin: 0; background: var(--soft); border-radius: 8px; padding: 8px 10px; }
.ea-card .foot { margin-top: auto; padding-top: 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ea-card .price { font-weight: 800; font-size: 1.15rem; color: var(--ink); }
.ea-card .price small { display: block; font-weight: 600; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.ea-card .price del { color: var(--mute); font-weight: 400; margin-right: 6px; }
.ea-card .price ins { text-decoration: none; }
.ea-card.is-coming .thumb { filter: saturate(.55); }

/* ---- catalogue filters */
.filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin: 0 0 24px; padding: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.filters label { font-size: .8rem; color: var(--mute); display: block; }
select, input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=search], textarea, .select2-container .select2-selection {
	font: inherit; padding: 10px 12px; border: 1px solid var(--field-line); border-radius: 10px; background: var(--field); color: var(--ink); max-width: 100%; }
select:focus, input:focus, textarea:focus, .btn:focus-visible, .button:focus-visible, a:focus-visible { outline: 3px solid #19b8ab66; outline-offset: 2px; }

/* ---- bundle band */
.bundle { display: grid; grid-template-columns: 1.3fr .7fr; gap: 32px; align-items: center; }
.bundle .card { text-align: center; color: var(--ink); }
.bundle .amount { font-size: 2rem; font-weight: 800; line-height: 1.1; }
.bundle .amount del { font-size: 1rem; font-weight: 400; color: var(--mute); display: block; }
.bundle .amount ins { text-decoration: none; }
.checks { list-style: none; padding: 0; }
.checks li { padding-left: 28px; position: relative; margin-bottom: 7px; }
.checks li::before { content: "\2713"; position: absolute; left: 0; top: .2em; width: 18px; height: 18px; border-radius: 50%; background: var(--brand); color: #fff; font-size: .7rem; font-weight: 800; display: grid; place-items: center; }
.section-dark .checks li::before { background: var(--accent); color: var(--accent-ink); }

/* ---- steps */
.steps { counter-reset: step; }
.steps .card { position: relative; padding-top: 66px; border-top: 4px solid var(--accent); }
.steps .card::before { counter-increment: step; content: counter(step); position: absolute; top: 18px; left: 24px; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(140deg, var(--brand-bright), var(--brand)); color: #fff; display: grid; place-items: center; font-weight: 800; }

/* ---- call to action band */
.cta-band { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.cta-band h2 { margin: 0 0 .2em; }
.cta-band p { margin: 0; }

/* ---- tables */
.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
.table th, .table td, .shop_table th, .shop_table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--mute); white-space: nowrap; }
.table { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.table thead th { background: var(--soft); }
.kv th { width: 34%; text-transform: none; letter-spacing: 0; font-size: .95rem; color: var(--ink); font-weight: 700; white-space: normal; background: var(--soft); }
.note-box, .risk { border-left: 4px solid var(--accent); background: var(--accent-soft); padding: 14px 16px; border-radius: 0 10px 10px 0; font-size: .92rem; color: var(--note-ink); }
.note-box a, .risk a { color: var(--note-ink); font-weight: 700; }
mark.todo { background: #fff3b0; color: #3b2f0b; outline: 1px dashed #b97f0a; border-radius: 3px; padding: 0 3px; }
.notice-draft { background: #fff8e1; color: #3b2f0b; border: 1px solid #e6c964; border-radius: 10px; padding: 12px 16px; margin: 0 0 24px; font-size: .92rem; }

/* ---- single product */
.product-hero { background: linear-gradient(180deg, var(--card), var(--paper)); border-bottom: 1px solid var(--line); }
.product-top { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; padding: 30px 0 52px; align-items: start; }
.product-top .gallery { border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: var(--brand-deep); box-shadow: var(--shadow); }
.product-top .gallery img, .product-top .gallery svg { width: 100%; }
.thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; }
.thumbs img { border-radius: 8px; border: 1px solid var(--line); aspect-ratio: 4 / 3; object-fit: cover; }
.buy h1 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); margin-bottom: .3em; }
.buy .price { font-size: 1.7rem; font-weight: 800; margin: 14px 0 6px; display: block; color: var(--ink); }
.buy .price del { font-size: 1rem; color: var(--mute); font-weight: 400; }
.buy .price ins { text-decoration: none; }
.buy .price small { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.buy form.cart { margin: 14px 0 10px; }
.buy form.cart .quantity { display: none !important; }
.buy table.variations { margin-bottom: 12px; }
.buy table.variations th, .buy table.variations td { display: block; padding: 0; border: 0; text-align: left; }
.buy table.variations th { font-size: .8rem; color: var(--mute); font-weight: 600; }
.buy table.variations select { width: 100%; margin-top: 4px; }
.buy .reset_variations { font-size: .85rem; }
.buy .single_add_to_cart_button { width: 100%; padding: 16px 22px; font-size: 1.08rem; }
.buy .woocommerce-variation-price { margin: 10px 0; }
.plan-terms { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; font-size: .92rem; margin: 12px 0; }
.options { margin-top: 8px; }
.options td { padding: 9px 0; border-top: 1px solid var(--line); vertical-align: top; }
.options tr:first-child td { border-top: 0; }
.options .opt-price { text-align: right; font-weight: 800; white-space: nowrap; padding-left: 14px; font-size: 1.05rem; }
.options .opt-terms { display: block; color: var(--mute); font-size: .85rem; }
.availability { border: 1px dashed var(--link); background: var(--soft); border-radius: 12px; padding: 16px 18px; margin: 14px 0; }
.availability strong { display: block; font-size: 1.1rem; color: var(--link); }
.availability p { margin: 6px 0 12px; color: var(--ink-2); }
.assurances { list-style: none; padding: 0; margin: 14px 0 0; font-size: .9rem; color: var(--mute); }
.assurances li { padding-left: 22px; position: relative; margin-bottom: 4px; }
.assurances li::before { content: "\2713"; position: absolute; left: 0; color: var(--link); font-weight: 800; }
.product-nav { position: sticky; top: 73px; z-index: 20; background: var(--card); border-bottom: 1px solid var(--line); }
.product-nav .wrap { display: flex; gap: 4px; overflow-x: auto; }
.product-nav a { padding: 14px 14px; text-decoration: none; font-weight: 700; font-size: .92rem; white-space: nowrap; border-bottom: 3px solid transparent; color: var(--ink-2); }
.product-nav a:hover { border-bottom-color: var(--accent); color: var(--link); }
.product-section { padding: 52px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 126px; }
.evidence-card .thumb { aspect-ratio: 16 / 9; background: var(--soft); border-radius: 8px; overflow: hidden; margin: 10px 0; border: 1px solid var(--line); }
.evidence-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.faq details { border-bottom: 1px solid var(--line); padding: 14px 0; }
.faq summary { cursor: pointer; font-weight: 700; }
.faq summary::marker { color: var(--accent-deep); }
.faq details p { margin: 10px 0 0; color: var(--ink-2); }
.sticky-buy { display: none; }

/* ---- content pages */
.page-head { padding: 48px 0 30px; color: #fff; background: radial-gradient(700px 300px at 90% -20%, #f0b42926, transparent 60%), linear-gradient(155deg, #073a41, var(--brand-deep)); }
.page-head h1 { margin: 0; color: #fff; font-size: clamp(1.8rem, 3.8vw, 2.6rem); }
.page-head .breadcrumbs, .page-head .woocommerce-breadcrumb, .page-head .breadcrumbs a, .page-head .woocommerce-breadcrumb a { color: #a9c6c3; }
.page-head .term-description, .page-head p { color: #cfe3e0; }
.breadcrumbs, .woocommerce-breadcrumb { font-size: .85rem; color: var(--mute); margin: 0 0 10px; }
.breadcrumbs a, .woocommerce-breadcrumb a { color: var(--mute); }
.entry { padding-top: 38px; padding-bottom: 68px; }
.entry h2 { margin-top: 1.6em; }
.entry h3 { margin-top: 1.3em; }
.entry > article > h2:first-child, .entry article > p:first-child + h2 { margin-top: .6em; }
.entry table { margin: 0 0 1.2em; background: var(--card); border: 1px solid var(--line); }
.entry th, .entry td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.entry th { background: var(--soft); }
.entry code, .entry kbd { background: var(--soft); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; font-size: .9em; }
.page-head .post-meta { margin: 10px 0 0; font-size: .9rem; color: #a9c6c3; }
.post-card { margin-bottom: 16px; }
.post-card h2 { font-size: 1.3rem; margin: 0 0 .3em; }
.post-card h2 a { text-decoration: none; color: var(--ink); }
.post-card h2 a:hover { color: var(--link); }
.post-next { margin: 40px 0 8px; border-left: 4px solid var(--accent); }
.post-next h2 { margin-top: 0; }
.nav-links { display: flex; gap: 6px; justify-content: center; margin-top: 26px; }
.nav-links .page-numbers { padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; background: var(--card); }
.nav-links .current { background: var(--brand); color: #fff; border-color: var(--brand); }
.doc-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; }
.doc-nav { position: sticky; top: 96px; align-self: start; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; }
.doc-nav ul { list-style: none; padding: 0; margin: 0; }
.doc-nav a { display: block; padding: 9px 12px; border-radius: 8px; text-decoration: none; color: var(--ink-2); }
.doc-nav a:hover { background: var(--soft); color: var(--link); }
.doc-nav .current a { background: var(--brand); color: #fff; font-weight: 700; }

/* ---- WooCommerce: notices, cart, checkout, account */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice { list-style: none; margin: 0 0 20px; padding: 14px 18px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); border-left: 4px solid var(--ok); }
.woocommerce-info { border-left-color: var(--accent); }
.woocommerce-error { border-left-color: var(--bad); }
.woocommerce-message .button, .woocommerce-info .button { float: right; padding: 6px 14px; font-size: .85rem; margin-left: 12px; }
.shop_table { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); margin: 0 0 24px; }
.shop_table .product-thumbnail img { width: 64px; border-radius: 6px; }
.shop_table .product-remove a { text-decoration: none; font-size: 1.3rem; color: var(--bad); }
.cart_totals, .woocommerce-checkout-review-order, .woocommerce-billing-fields, .woocommerce-additional-fields, .woocommerce-account-fields { margin-bottom: 24px; }
.cart-collaterals { display: flex; justify-content: flex-end; }
.cart_totals { width: min(100%, 460px); }
.woocommerce form .form-row { margin: 0 0 14px; display: block; }
.woocommerce form .form-row label { display: block; font-size: .875rem; color: var(--mute); margin-bottom: 4px; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select { width: 100%; }
.woocommerce form .form-row-first, .woocommerce form .form-row-last { width: calc(50% - 8px); display: inline-block; vertical-align: top; }
.woocommerce form .form-row-first { margin-right: 12px; }
.woocommerce-checkout .col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.woocommerce-checkout #payment { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.woocommerce-checkout #payment ul.payment_methods { list-style: none; padding: 0; margin: 0 0 14px; }
.woocommerce-checkout #payment .payment_box { color: var(--mute); font-size: .9rem; padding: 6px 0 6px 24px; }
.woocommerce-terms-and-conditions-wrapper { background: var(--accent-soft); border: 1px solid var(--note-line); border-radius: 10px; padding: 12px 14px; margin: 0 0 14px; font-size: .92rem; }
.woocommerce-form-login, .woocommerce-form-register, .woocommerce-ResetPassword { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; max-width: 480px; border-top: 4px solid var(--accent); }
.u-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.account-layout, .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 36px; align-items: start; }
.woocommerce-MyAccount-navigation ul { list-style: none; padding: 8px; margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.woocommerce-MyAccount-navigation a { display: block; padding: 10px 12px; text-decoration: none; border-radius: 8px; font-weight: 600; color: var(--ink-2); }
.woocommerce-MyAccount-navigation a:hover { background: var(--soft); color: var(--link); }
.woocommerce-MyAccount-navigation .is-active a { background: var(--brand); color: #fff; }
.woocommerce-MyAccount-content > p:first-child { color: var(--mute); }
.woocommerce-result-count, .woocommerce-ordering { display: none; }
.woocommerce-pagination ul { list-style: none; display: flex; gap: 6px; padding: 0; justify-content: center; margin: 30px 0 0; }
.woocommerce-pagination a, .woocommerce-pagination span { display: block; padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; background: var(--card); }
.woocommerce-pagination .current { background: var(--brand); color: #fff; }
.onsale { position: absolute; margin: 12px; background: var(--accent); color: var(--accent-ink); font-size: .75rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; z-index: 2; }
.k3lic, .k3lic-tiles { --k3-line: var(--line); --k3-soft: var(--soft); --k3-ink: var(--ink); --k3-mute: var(--mute); --k3-accent: var(--link); --k3-ok: var(--ok); --k3-warn: var(--warn); --k3-bad: var(--bad); }

/* ---- brokers and VPS providers */
.partners { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; margin: 22px 0 30px; }
.partner { display: flex; flex-direction: column; gap: 14px; padding: 18px; text-align: center; border-top: 4px solid var(--accent); transition: box-shadow .15s, transform .15s; }
.partner:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.partner-logo { display: grid; place-items: center; height: 104px; background: linear-gradient(150deg, #073a41, var(--brand-deep)); color: var(--accent); border-radius: 12px; padding: 12px; font-weight: 800; font-size: 1.15rem; text-align: center; letter-spacing: -.01em; }
.partner-logo.has-image { background: #fff; border: 1px solid var(--line); }
.partner-logo.has-image.on-dark { background: linear-gradient(150deg, #0b2a31, #06181c); border-color: #ffffff1f; }
.partner-logo img { max-height: 64px; max-width: 100%; width: auto; object-fit: contain; }
.partner-body { flex: 1; }
.partner-body h3 { margin: 0; font-size: 1.15rem; }
.partner-body p, .partner-body .checks { text-align: left; margin-top: .6em; }
.partner-body .checks { margin-bottom: 0; }
.partner-body p:last-child { margin-bottom: 0; }
.partner-cta { text-align: center; }
.partner-cta .btn { width: 100%; }
.partner-cta p { margin: 8px 0 0; }
.partner-disclosure { margin: 0 0 6px; }
.partner-footnote + .partner-disclosure, .partners + .partner-disclosure { margin: -6px 0 30px; }

/* ---- footer */
.site-footer { background: linear-gradient(170deg, var(--brand-deep), #03161a); color: #b9d3d0; padding: 56px 0 30px; margin-top: 0; font-size: .92rem; border-top: 3px solid var(--accent); }
.site-footer a { color: #e7f3f1; text-decoration: none; }
.site-footer a:hover { color: var(--accent); }
.site-footer h4 { color: var(--accent); font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: .9em; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 7px; }
.site-footer .brand { margin-bottom: 12px; color: #fff; }
/* ---- the ways to pay: brand marks as they come, on a light card so that they read in light and dark */
.pay-marks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 14px 0 0; }
.pay-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--mute); }
.pay-list { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.pay-list li { margin: 0; }
.pay-mark { display: block; height: 26px; width: auto; border-radius: 4px; box-shadow: 0 0 0 1px #0000001a; background: #fff; }
.pay-word { display: flex; align-items: center; padding: 0 9px; font-size: .74rem; font-weight: 700; line-height: 26px; color: #1d2b2a; white-space: nowrap; }
.site-footer .pay-marks { margin-top: 30px; }
.site-footer .pay-label { color: var(--accent); }
.site-footer .pay-mark { box-shadow: none; }
.cart_totals + .pay-marks, .cart-collaterals .pay-marks { justify-content: flex-end; }
.footer-legal { border-top: 1px solid #ffffff1f; margin: 36px 0 0; padding-top: 20px; font-size: .82rem; color: #8fb0ac; }

/* ---- responsive */
@media (max-width: 960px) {
	.g3, .g4, .products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hero .grid, .product-top, .bundle, .doc-layout, .woocommerce-checkout .col2-set, .u-columns,
	.account-layout, .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) { grid-template-columns: 1fr; }
	.facts-strip .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fact { border-left: 0; padding-left: 0; }
	.doc-nav { position: static; }
	.nav-toggle { display: inline-block; margin-left: auto; }
	.nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--head-bg); border-bottom: 3px solid var(--accent); padding: 10px 20px 16px; margin: 0; }
	.nav.open { display: block; }
	.nav ul { flex-direction: column; }
	.nav ul ul { display: flex; position: static; border: 0; box-shadow: none; padding: 0 0 0 14px; background: transparent; min-width: 0; }
	.nav ul ul a { color: var(--head-link); }
	.nav ul ul a:hover { background: var(--head-hover); color: var(--head-ink); }
	.site-header .wrap { gap: 8px; }
	.header-tools .hide-sm { display: none; }
	.woocommerce-MyAccount-navigation ul { display: flex; overflow-x: auto; }
	.woocommerce-MyAccount-navigation a { white-space: nowrap; }
}
@media (max-width: 640px) {
	.section { padding: 48px 0; }
	.hero { padding: 48px 0; }
	.g2, .g3, .g4, .products, .facts-strip .wrap { grid-template-columns: 1fr; }
	.fact { padding: 14px 0; border-top: 1px solid var(--line); }
	.fact:first-child { border-top: 0; }
	.wrap { padding: 0 16px; }
	.brand { font-size: 1.3rem; }
	.brand .mark { width: 34px; height: 34px; }
	.brand .word { height: 34px; }
	.woocommerce form .form-row-first, .woocommerce form .form-row-last { width: 100%; margin-right: 0; }
	.sticky-buy { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--card); border-top: 3px solid var(--accent); padding: 10px 16px; justify-content: space-between; align-items: center; gap: 10px; box-shadow: 0 -6px 20px #062a3026; }
	.single-product .site-footer { padding-bottom: 90px; }
	.product-nav { top: 63px; }
	.shop_table thead { display: none; }
	.shop_table tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); }
	.shop_table td { display: block; border: 0; padding: 4px 14px; }
}
@media (prefers-reduced-motion: reduce) { :root[data-motion="respect"] * { transition: none !important; scroll-behavior: auto !important; } }

/* ======================================================================================================
   Motion. Everything below is an enhancement: with scripts off, or for a visitor who has asked for
   reduced motion, the page is simply still.
   ====================================================================================================== */

/* ---- things arrive as they scroll into view (the class is added by assets/site.js) */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s cubic-bezier(.2,.7,.2,1) var(--d, 0ms), transform .6s cubic-bezier(.2,.7,.2,1) var(--d, 0ms); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }
.fact.reveal .ico { transform: scale(.6); transition: transform .5s cubic-bezier(.3,1.6,.5,1) calc(var(--d, 0ms) + 120ms); }
.fact.reveal.in .ico { transform: none; }
.eyebrow.reveal::before { width: 0; transition: width .6s ease calc(var(--d, 0ms) + 150ms); }
.eyebrow.reveal.in::before { width: 26px; }

/* ---- the header tightens once the page is scrolled */
.site-header .wrap { transition: min-height .25s ease; }
.site-header .brand .mark { transition: width .25s ease, height .25s ease, transform .4s ease; }
.site-header.scrolled { box-shadow: 0 1px 0 var(--head-line), 0 14px 34px -20px #000000cc; }
.brand:hover .mark { transform: rotate(-6deg) scale(1.06); }

/* ---- the hero: a slow drifting light, a headline that settles, and the chart drawing itself */
.hero::after { content: ""; position: absolute; width: 620px; height: 620px; right: -160px; top: -220px; border-radius: 50%; pointer-events: none;
	background: radial-gradient(closest-side, #f0b42933, transparent 70%); animation: k3-drift 16s ease-in-out infinite alternate; }
@keyframes k3-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-140px, 90px, 0) scale(1.25); } }
.hero .eyebrow, .hero h1, .hero p.lead, .hero .hero-actions, .hero .hero-points { animation: k3-rise .8s cubic-bezier(.2,.7,.2,1) both; }
.hero h1 { animation-delay: .08s; } .hero p.lead { animation-delay: .18s; } .hero .hero-actions { animation-delay: .28s; } .hero .hero-points { animation-delay: .38s; }
@keyframes k3-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.gold { background-size: 200% 100%; animation: k3-sheen 6s linear infinite; }
@keyframes k3-sheen { from { background-position: 0% 50%; } to { background-position: -200% 50%; } }
.hero-art { animation: k3-rise .9s .2s cubic-bezier(.2,.7,.2,1) both, k3-float 7s 1.2s ease-in-out infinite alternate; }
@keyframes k3-float { from { transform: translateY(0); } to { transform: translateY(-10px); } }
.hero-chart .candle { transform-box: fill-box; transform-origin: 50% 100%; animation: k3-candle .55s cubic-bezier(.3,1.4,.5,1) both; animation-delay: calc(.5s + var(--i) * .09s); }
@keyframes k3-candle { from { opacity: 0; transform: scaleY(0); } to { opacity: 1; transform: scaleY(1); } }
.hero-chart .line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: k3-draw 1.9s .6s cubic-bezier(.5,0,.2,1) forwards; }
@keyframes k3-draw { to { stroke-dashoffset: 0; } }
.hero-chart .area { opacity: 0; animation: k3-fade 1.2s 1.6s ease forwards; }
@keyframes k3-fade { to { opacity: 1; } }
.hero-chart .dot { opacity: 0; animation: k3-fade .3s 2.4s forwards; }
.hero-chart .ping { transform-box: fill-box; transform-origin: center; opacity: 0; animation: k3-ping 2.2s 2.5s ease-out infinite; }
@keyframes k3-ping { 0% { opacity: .55; transform: scale(.4); } 100% { opacity: 0; transform: scale(2.4); } }
.hero-chart .glow { animation: k3-glow 6s ease-in-out infinite alternate; }
@keyframes k3-glow { from { opacity: .7; } to { opacity: 1; } }
/* the desk scene of the home page (k3_hero_art): screens, an order that fills, steam, the city at night */
.hero-desk text { font-family: var(--font); }
.hd-head { font-size: 9px; font-weight: 800; letter-spacing: .12em; fill: #7fb7b0; }
.hd-sym { font-size: 11px; font-weight: 700; fill: #cfe3e0; }
.hd-px { font-size: 11px; font-weight: 800; fill: #e7f3f1; font-variant-numeric: tabular-nums; animation: hd-flick 4.2s calc(var(--i) * .7s) steps(1) infinite; }
@keyframes hd-flick { 0%, 100% { fill: #e7f3f1; } 30% { fill: #35d0c3; } 55% { fill: #e7f3f1; } 70% { fill: #ff8a8a; } 85% { fill: #e7f3f1; } }
.hd-toast { font-size: 11px; font-weight: 800; fill: #e7fff9; }
.hd-order { opacity: 0; animation: hd-order 7s 3s ease-in-out infinite; }
@keyframes hd-order { 0% { opacity: 0; transform: translateY(8px); } 8%, 60% { opacity: 1; transform: none; } 72%, 100% { opacity: 0; transform: translateY(-6px); } }
.hd-live, .hd-phone { animation: hd-blink 1.4s ease-in-out infinite; }
.hd-phone { animation-duration: 2.6s; }
@keyframes hd-blink { 50% { opacity: .2; } }
.hd-eq { stroke-dasharray: 1; stroke-dashoffset: 1; animation: k3-draw 2.4s 1s cubic-bezier(.5,0,.2,1) forwards; }
.hd-steam path { opacity: 0; animation: hd-steam 3.2s ease-out infinite; }
.hd-steam path + path { animation-delay: 1.6s; }
@keyframes hd-steam { 0% { opacity: 0; transform: translateY(6px); } 30% { opacity: .9; } 100% { opacity: 0; transform: translateY(-16px); } }
.hd-mug { font-size: 9px; font-weight: 900; fill: #3b2a00; }
.hd-plan-t { font-size: 6.5px; font-weight: 900; letter-spacing: .08em; fill: #0b3238; }
.hd-plan-i { font-size: 6.5px; font-weight: 700; fill: #23474c; }
.hd-tick { stroke-dasharray: 1; stroke-dashoffset: 1; animation: hd-tick 9s calc(1.5s + var(--i) * .7s) ease-out infinite; }
@keyframes hd-tick { 0% { stroke-dashoffset: 1; } 6%, 88% { stroke-dashoffset: 0; } 96%, 100% { stroke-dashoffset: 1; } }
.hd-lit { fill: #ffd874; opacity: .55; animation: hd-lit 9s calc(var(--i) * .9s) steps(1) infinite; }
@keyframes hd-lit { 0%, 100% { opacity: .55; } 40% { opacity: .12; } 70% { opacity: .75; } }
.hd-screenglow { animation: k3-glow 6s ease-in-out infinite alternate; }
.hd-person { transform-box: fill-box; transform-origin: 50% 100%; animation: hd-breathe 5s ease-in-out infinite; }
@keyframes hd-breathe { 50% { transform: scaleY(1.012); } }

/* ---- buttons: a band of light crosses the gold ones */
.btn-primary, .single_add_to_cart_button, .checkout-button, #place_order { position: relative; overflow: hidden; }
.btn-primary::after, .single_add_to_cart_button::after, .checkout-button::after, #place_order::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; transform: skewX(-20deg);
	background: linear-gradient(90deg, transparent, #ffffff99, transparent); transition: left .6s ease; pointer-events: none; }
.btn-primary:hover::after, .single_add_to_cart_button:hover::after, .checkout-button:hover::after, #place_order:hover::after { left: 120%; }
.hero-actions .btn-primary { animation: k3-pulse 3.2s 2.6s ease-in-out infinite; }
@keyframes k3-pulse { 0%, 100% { box-shadow: 0 10px 22px -10px #b97f0aaa, 0 0 0 0 #f0b42966; } 50% { box-shadow: 0 10px 22px -10px #b97f0aaa, 0 0 0 12px #f0b42900; } }

/* ---- cards: the coloured edge moves, and a soft light follows the pointer */
.ea-card::before { background: linear-gradient(90deg, var(--brand-bright), var(--accent), var(--brand-bright)); background-size: 200% 100%; animation: k3-sheen 5s linear infinite; }
.ea-card::after, .partner::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s; border-radius: inherit;
	background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), #19b8ab24, transparent 70%); }
.ea-card:hover::after, .partner:hover::after { opacity: 1; }
.partner { position: relative; }
.ea-card .thumb { overflow: hidden; }
.ea-card .thumb img, .ea-card .thumb svg { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.ea-card:hover .thumb img, .ea-card:hover .thumb svg { transform: scale(1.06); }
.steps .card { transition: transform .2s, box-shadow .2s; }
.steps .card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.steps .card::before { transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.steps .card:hover::before { transform: scale(1.15) rotate(-8deg); }
.fact .ico { transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.fact:hover .ico { transform: translateY(-3px) rotate(-6deg); }
.section-dark { position: relative; overflow: hidden; }
.section-dark::after { content: ""; position: absolute; width: 520px; height: 520px; left: -180px; bottom: -300px; border-radius: 50%; pointer-events: none;
	background: radial-gradient(closest-side, #19b8ab30, transparent 70%); animation: k3-drift 18s ease-in-out infinite alternate-reverse; }
.section-dark > .wrap { position: relative; z-index: 1; }
.nav a { transition: background .15s, color .15s; }
.badge-gold { animation: k3-badge 2.4s ease-in-out infinite; }
@keyframes k3-badge { 0%, 100% { box-shadow: 0 0 0 0 #f0b42955; } 50% { box-shadow: 0 0 0 6px #f0b42900; } }

/* ---- the language menu */
.lang { position: relative; }
.lang-btn, .theme-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1.5px solid var(--head-edge); color: var(--head-link); border-radius: 999px; padding: 7px 12px; font: 700 .8rem/1 var(--font); cursor: pointer; transition: background .15s, border-color .15s; }
.lang-btn:hover, .lang-btn[aria-expanded="true"], .theme-btn:hover { background: var(--head-hover); border-color: var(--accent); color: var(--head-ink); }
.theme-btn { padding: 7px 9px; }
.theme-btn svg { width: 18px; height: 18px; flex: none; max-width: none; }
.theme-btn .sun, :root[data-theme="dark"] .theme-btn .moon { display: none; }
:root[data-theme="dark"] .theme-btn .sun { display: block; }
.lang-list { position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; list-style: none; margin: 0; padding: 8px; width: 290px; max-height: min(70vh, 460px); overflow: auto;
	background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.lang-list[hidden] { display: none; }
.lang-list button { width: 100%; text-align: left; background: none; border: 0; border-radius: 8px; padding: 8px 10px; font: 500 .9rem/1.2 var(--font); color: var(--ink); cursor: pointer; }
.lang-list button:hover { background: var(--soft); color: var(--link); }
.lang-list button[aria-current="true"] { background: var(--brand); color: #fff; }
.lang-note { grid-column: 1 / -1; font-size: .78rem; color: var(--mute); padding: 8px 10px 4px; line-height: 1.4; }
#k3-gt, .goog-te-banner-frame, .skiptranslate > iframe, #goog-gt-tt, .goog-te-balloon-frame, .VIpgJd-ZVi9od-ORHb-OEVmcd, .VIpgJd-ZVi9od-aZ2wEe-wOHMyf { display: none !important; }
html.is-translated body, body { top: 0 !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }

/* ---- brokers and VPS: the one note under the list */
.partner-footnote { margin: -14px 0 30px; text-align: right; }

/* ---- eight menu items: a little tighter before the menu collapses */
@media (max-width: 1440px) {
	.site-header .wrap { gap: 10px; }
	.nav a { padding: 10px 7px; font-size: .92rem; }
	.nav > ul > li > a::before { left: 7px; right: 7px; }
	.header-tools a { padding: 9px 10px; }
}
@media (max-width: 1220px) {
	.nav-toggle { display: inline-block; margin-left: auto; }
	.nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--head-bg); border-bottom: 3px solid var(--accent); padding: 10px 20px 16px; margin: 0; max-height: calc(100vh - 80px); overflow: auto; }
	.nav.open { display: block; animation: k3-rise .25s ease both; }
	.nav ul { flex-direction: column; }
	.nav ul ul { display: flex; position: static; border: 0; box-shadow: none; padding: 0 0 0 14px; background: transparent; min-width: 0; }
	.nav ul ul a { color: var(--head-link); }
	.nav ul ul a:hover { background: var(--head-hover); color: var(--head-ink); }
	.header-tools .hide-sm { display: none; }
}
@media (max-width: 640px) {
	.lang-list { position: fixed; left: 12px; right: 12px; top: 70px; width: auto; }
	.lang-btn .lang-now { display: none; }
	.partner-footnote { text-align: left; }
}

/* ---- brokers and VPS: one row each, as tall as its content and no taller */
.partners { grid-template-columns: 1fr; gap: 12px; }
.partner { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 10px 18px 10px 12px; text-align: left; border-top: 1px solid var(--line); border-left: 4px solid var(--accent); }
.partner-logo { height: 60px; min-height: 0; padding: 8px 12px; border-radius: 10px; font-size: 1rem; }
.partner-logo img { max-height: 42px; }
.partner-body h3 { font-size: 1.2rem; }
.partner-cta .btn { width: auto; white-space: nowrap; padding: 10px 22px; }
@media (max-width: 700px) {
	.partner { grid-template-columns: 110px minmax(0, 1fr); gap: 12px; }
	.partner-logo { height: 52px; padding: 6px 8px; }
	.partner-cta { grid-column: 1 / -1; }
	.partner-cta .btn { width: 100%; }
}

/* ======================================================================================================
   Livelier. All of it is decoration: it stops for visitors who ask for reduced motion, and nothing
   depends on it.
   ====================================================================================================== */

/* ---- how far down the page you are */
.scroll-bar { position: fixed; left: 0; top: 0; height: 3px; width: 100%; z-index: 90; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--brand-bright), var(--accent), #ff9f43); pointer-events: none; }

/* ---- the hero: sparks rising, a light under the pointer, a line that keeps changing, a chart that ticks */
.hero .spark { position: absolute; bottom: -12px; width: var(--s, 5px); height: var(--s, 5px); border-radius: 50%; background: var(--c, #ffd874); box-shadow: 0 0 10px 2px var(--c, #ffd874); opacity: 0; pointer-events: none; animation: k3-spark var(--t, 9s) linear var(--w, 0s) infinite; }
@keyframes k3-spark { 0% { transform: translate3d(0, 0, 0) scale(.6); opacity: 0; } 12% { opacity: .85; } 80% { opacity: .5; } 100% { transform: translate3d(var(--x, 30px), -620px, 0) scale(1.1); opacity: 0; } }
.hero .wrap::before { content: ""; position: absolute; left: var(--hx, 70%); top: var(--hy, 30%); width: 460px; height: 460px; margin: -230px 0 0 -230px; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, #19b8ab2e, transparent 70%); transition: left .5s ease-out, top .5s ease-out; }
.hero .grid { position: relative; }
.hero-rotate { margin: -4px 0 16px; font-size: 1.25rem; font-weight: 700; color: #cfe3e0; animation: k3-rise .8s .14s cubic-bezier(.2,.7,.2,1) both; }
.hero-rotate .rotate { display: inline-block; color: var(--accent-2); border-bottom: 3px solid var(--accent); padding-bottom: 1px; }
.hero-rotate .rotate.out { animation: k3-word-out .35s ease forwards; }
.hero-rotate .rotate.in { animation: k3-word-in .45s cubic-bezier(.3,1.5,.5,1); }
@keyframes k3-word-out { to { opacity: 0; transform: translateY(-14px) rotateX(70deg); } }
@keyframes k3-word-in { from { opacity: 0; transform: translateY(16px) rotateX(-70deg); } to { opacity: 1; transform: none; } }
.hero-chart g.candle:last-of-type rect { transform-box: fill-box; transform-origin: 50% 100%; animation: k3-tick 1.6s 3s ease-in-out infinite alternate; }
@keyframes k3-tick { 0% { transform: scaleY(1); } 35% { transform: scaleY(1.28); } 60% { transform: scaleY(.92); } 100% { transform: scaleY(1.16); } }
.hero-art { transition: transform .3s ease-out; transform-style: preserve-3d; }
.hero-art::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg, transparent 40%, #ffffff24 50%, transparent 60%); background-size: 250% 100%; animation: k3-glare 5s 2s ease-in-out infinite; }
.hero-art { position: relative; }
@keyframes k3-glare { 0%, 55% { background-position: 120% 0; } 100% { background-position: -60% 0; } }

/* ---- the moving band under the hero */
.ticker { overflow: hidden; background: linear-gradient(90deg, var(--accent-2), var(--accent), #f39c12, var(--accent), var(--accent-2)); background-size: 300% 100%; animation: k3-sheen 12s linear infinite; color: var(--accent-ink); border-block: 1px solid #00000022; }
.ticker-track { display: flex; width: max-content; animation: k3-ticker 38s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker span { padding: 11px 26px; font-weight: 800; font-size: .86rem; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; display: flex; align-items: center; gap: 26px; }
.ticker span::after { content: "\2726"; font-size: .8rem; opacity: .7; }
@keyframes k3-ticker { to { transform: translateX(-50%); } }

/* The live market watch: a strip of live prices under the header (inc/market-watch.php). Its height is
   reserved before the prices arrive, so the page does not jump when they do. */
.market-watch { position: relative; background: var(--soft); border-bottom: 1px solid var(--line); overflow: hidden; }
.market-watch[hidden] { display: none; }
.market-watch-tape { height: 46px; opacity: 0; transition: opacity .5s ease; }
.market-watch.is-live .market-watch-tape { opacity: 1; }
.market-watch-tape .tradingview-widget-container, .market-watch-tape iframe { display: block; width: 100%; }
/* The widget's own page declares no colour scheme. If the frame around it says "dark" the browser puts a
   white sheet behind it; saying "light" here keeps it see-through in both modes. */
.market-watch-tape, .market-watch-tape iframe { color-scheme: light; }
.market-watch::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, var(--line) 50%, transparent 70%); background-size: 220% 100%; animation: k3-sheen 1.6s linear infinite; opacity: .55; pointer-events: none; }
.market-watch.is-live::before { display: none; }
@media print { .market-watch { display: none; } }

/* ---- headings underline themselves; things arrive from different sides */
.has-motion .section h2::after { content: ""; display: block; height: 4px; width: 0; margin-top: 10px; border-radius: 4px; background: linear-gradient(90deg, var(--accent), var(--brand-bright)); transition: width .9s cubic-bezier(.2,.7,.2,1) .25s; }
.has-motion .section h2.seen::after { width: 76px; }
.ea-card.reveal { transform: translateY(46px) scale(.93) rotate(-1.2deg); }
.products li:nth-child(even) .ea-card.reveal { transform: translateY(46px) scale(.93) rotate(1.2deg); }
.partner.reveal { transform: translateX(-46px); }
.partner:nth-child(even).reveal { transform: translateX(46px); }
.steps .card.reveal { transform: translateY(40px) scale(.9); }
.fact.reveal { transform: translateY(26px) scale(.96); }

/* ---- cards lean towards the pointer and catch the light */
.ea-card { transform-style: preserve-3d; will-change: transform; }
.ea-card:hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px); transition: transform .08s linear, box-shadow .18s, border-color .18s; box-shadow: 0 30px 60px -28px #062a3099, 0 0 0 1px var(--brand-bright), 0 0 34px -6px #19b8ab66; }
.ea-card .foot .btn, .ea-card .price { transition: transform .2s; }
.ea-card:hover .price { transform: scale(1.06); transform-origin: left center; }
.badge-solid { background-image: linear-gradient(110deg, var(--brand), var(--brand-bright), var(--brand)); background-size: 220% 100%; animation: k3-sheen 4s linear infinite; }

/* ---- small things that never sit quite still */
.fact .ico { animation: k3-bob 3.6s ease-in-out infinite; }
.fact:nth-child(2) .ico { animation-delay: .5s; } .fact:nth-child(3) .ico { animation-delay: 1s; } .fact:nth-child(4) .ico { animation-delay: 1.5s; }
@keyframes k3-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
.steps .card::before { animation: k3-ring 2.8s ease-out infinite; }
.steps .card:nth-child(2)::before { animation-delay: .9s; } .steps .card:nth-child(3)::before { animation-delay: 1.8s; }
@keyframes k3-ring { 0% { box-shadow: 0 0 0 0 #19b8ab88; } 70%, 100% { box-shadow: 0 0 0 14px #19b8ab00; } }
.btn-primary { animation: k3-pulse 3.2s ease-in-out infinite; }
@keyframes k3-wink { 0%, 86%, 100% { rotate: 0deg; scale: 1; } 90% { rotate: -10deg; scale: 1.12; } 94% { rotate: 8deg; scale: 1.08; } }
.page-head { position: relative; overflow: hidden; }
.page-head::after { content: ""; position: absolute; width: 520px; height: 520px; right: -120px; top: -300px; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, #19b8ab3d, transparent 70%); animation: k3-drift 14s ease-in-out infinite alternate; }
.page-head .wrap { position: relative; z-index: 1; }
.page-head h1 { animation: k3-rise .7s cubic-bezier(.2,.7,.2,1) both; }
.nav > ul > li > a { position: relative; }
.nav > ul > li > a::before { content: ""; position: absolute; left: 13px; right: 13px; bottom: 5px; height: 2px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform .25s ease; }
.nav > ul > li > a:hover::before { transform: scaleX(1); }
.cart-count { animation: k3-badge 2.4s ease-in-out infinite; }
.k3st-chat-open { animation: k3st-pop .5s 1.2s cubic-bezier(.3,1.5,.5,1) both, k3-bob 3s 2s ease-in-out infinite; }

/* ---- brokers and VPS: the facts beside the name */
.partner-body.has-facts { display: grid; grid-template-columns: minmax(110px, 150px) minmax(0, 1fr); gap: 4px 22px; align-items: center; }
.partner-body.has-facts > :not(h3):not(.partner-facts) { grid-column: 1 / -1; }
.partner-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); margin: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); overflow: hidden; }
.partner-facts div { padding: 7px 12px; border-left: 1px solid var(--line); min-width: 0; }
.partner-facts div:first-child { border-left: 0; }
.partner-facts dt { white-space: nowrap; font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.partner-facts dd { margin: 1px 0 0; font-weight: 700; font-size: .88rem; color: var(--ink); line-height: 1.3; }
.partner-footnote { max-width: 760px; margin-left: auto; }
@media (max-width: 960px) {
	.partner-body.has-facts { grid-template-columns: 1fr; }
	.partner { grid-template-columns: 130px minmax(0, 1fr); }
	.partner-cta { grid-column: 1 / -1; }
	.partner-cta .btn { width: 100%; }
}
@media (max-width: 560px) {
	.partner-facts { grid-template-columns: 1fr; }
	.partner-facts div { border-left: 0; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
	.partner-facts div:first-child { border-top: 0; }
	.partner-facts dd { text-align: right; }
}

/* ---- social links in the footer */
.social { display: flex; gap: 10px; margin: 14px 0 0 !important; }
.social li { margin: 0; }
.social a, .social .is-empty { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid #ffffff2e; color: #e7f3f1; transition: transform .2s, background .2s, border-color .2s, color .2s; }
.social a:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); transform: translateY(-3px) rotate(-6deg); }
.social .is-empty { opacity: .45; border-style: dashed; }

/* Visitors who have asked their device for less motion get a still page when the owner has chosen
   "Respect the device" under Appearance > Customize > Motion. */
@media (prefers-reduced-motion: reduce) {
	:root[data-motion="respect"] *, :root[data-motion="respect"] *::before, :root[data-motion="respect"] *::after { animation: none !important; transition: none !important; }
	:root[data-motion="respect"] .reveal { opacity: 1; transform: none; }
	:root[data-motion="respect"] .hero-chart .line { stroke-dashoffset: 0; }
	:root[data-motion="respect"] .hero-chart .area, :root[data-motion="respect"] .hero-chart .dot { opacity: 1; }
	:root[data-motion="respect"] .hd-eq { stroke-dashoffset: 0; }
	:root[data-motion="respect"] .hd-order { opacity: 1; }
	:root[data-motion="respect"] .hd-tick { stroke-dashoffset: 0; }
}

/* ---- a partner with no link yet (a prop firm being arranged) */
.partner-cta .soon { display: inline-block; padding: 9px 16px; border: 1px dashed var(--mute); border-radius: 999px; font-size: .85rem; font-weight: 700; color: var(--mute); white-space: nowrap; }

/* things slide in from the sides: never let that widen the page */
body { overflow-x: clip; }

/* ---- a product's results video and Strategy Tester report */
.video-box { position: relative; display: grid; place-items: center; width: 100%; max-width: 860px; aspect-ratio: 16 / 9; padding: 0; border: 1px solid #ffffff24; border-radius: 18px; cursor: pointer; overflow: hidden; color: #fff; font: inherit;
	background: radial-gradient(600px 300px at 80% 10%, #f0b42930, transparent 60%), linear-gradient(155deg, #0b5158, var(--brand-deep) 60%, #031518); box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; }
.video-box:hover { transform: translateY(-3px); }
.video-play { width: 86px; height: 86px; border-radius: 50%; background: linear-gradient(180deg, var(--accent-2), var(--accent)); display: grid; place-items: center; animation: k3-ring 2.4s ease-out infinite; }
.video-play::before { content: ""; margin-left: 7px; border-style: solid; border-width: 16px 0 16px 28px; border-color: transparent transparent transparent var(--accent-ink); }
.video-text { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; font-weight: 800; font-size: 1.1rem; }
.video-text small { display: block; font-weight: 500; font-size: .8rem; color: #b9d3d0; margin-top: 2px; }
.video-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-box.playing { cursor: default; transform: none; }
.report-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; align-items: start; margin-top: 12px; }
.report-shot { display: block; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card); transition: transform .2s, box-shadow .2s; }
.report-shot:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.report-shot img { width: 100%; }

/* ---- the home page's photo band: people at work at their screens, never their faces */
.pb-grid { display: grid; grid-template-columns: 1.05fr 1fr 1fr; grid-template-areas: "main text text" "main a b"; gap: 18px; }
.pb-text { grid-area: text; align-self: center; padding: 8px 8px 8px 22px; }
.pb-text h2 { font-size: clamp(1.7rem, 3.2vw, 2.45rem); line-height: 1.15; margin: 0 0 .5em; }
.pb-text .lead { color: var(--ink-2); max-width: 36em; }
.pb-chips { list-style: none; margin: 18px 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pb-chips li { margin: 0; padding: 7px 13px; border-radius: 999px; font-size: .88rem; font-weight: 700; color: var(--ink); background: var(--card); border: 1px solid var(--line); }
.pb-chips li::before { content: "\2713\00a0"; color: var(--brand-bright); font-weight: 900; }
.pb-photo { position: relative; margin: 0; overflow: hidden; border-radius: 22px; border: 1px solid var(--line); box-shadow: var(--shadow); isolation: isolate; min-height: 250px; }
.pb-main { grid-area: main; min-height: 560px; }
.pb-a { grid-area: a; }
.pb-b { grid-area: b; }
.pb-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: pb-drift 20s ease-in-out infinite alternate; }
.pb-b img { animation-delay: -7s; }
.pb-a img { animation-delay: -13s; }
@keyframes pb-drift { from { transform: scale(1.04); } to { transform: scale(1.13) translate(-1.5%, -1%); } }
.pb-photo::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, transparent 45%, #03161ad9 100%), linear-gradient(135deg, #19b8ab26, transparent 55%); }
.pb-photo figcaption { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 1; }
.pb-photo figcaption span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-weight: 800; font-size: .9rem; color: var(--accent-ink, #2b1d00); background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 10px 24px -10px #000; transform: translateY(0); transition: transform .3s ease; }
.pb-photo figcaption span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: hd-blink 1.6s ease-in-out infinite; }
.pb-photo:hover figcaption span { transform: translateY(-4px); }
@media (max-width: 900px) {
	.pb-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "text text" "main main" "a b"; }
	.pb-text { padding: 0 0 6px; }
	.pb-main { min-height: 380px; }
}
@media (max-width: 560px) {
	.pb-grid { grid-template-columns: 1fr; grid-template-areas: "text" "main" "a" "b"; }
	.pb-photo { min-height: 220px; }
	.pb-main { min-height: 320px; }
}

/* the "Need a broker or a VPS?" band, over a trading desk */
.cta-photo { position: relative; overflow: hidden; isolation: isolate; background: #031417; }
.cta-photo::before { content: ""; position: absolute; inset: -4%; z-index: -2; background: url("assets/home/trading-desk.jpg") center 40% / cover no-repeat; animation: pb-drift 24s ease-in-out infinite alternate; }
.cta-photo::after { content: ""; position: absolute; inset: 0; width: auto; height: auto; border-radius: 0; animation: none; z-index: -1; background: linear-gradient(100deg, #031417f7 0%, #031417e0 42%, #0314178c 100%), radial-gradient(700px 300px at 85% 0%, #19b8ab33, transparent 70%); }

/* ---- the legal pages (Terms, Privacy, Refund policy, Risk disclosure): a summary first, then numbered sections */
.k3-legal { counter-reset: lg; }
.k3-legal .vi { width: 20px; height: 20px; flex: none; }
.legal-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.legal-meta span { padding: 5px 12px; border-radius: 999px; font-size: .82rem; font-weight: 700; color: var(--mute); background: var(--soft); border: 1px solid var(--line); }
.k3-legal .lead { font-size: 1.12rem; color: var(--ink-2); }
.legal-toc { margin: 26px 0 8px; padding: 18px 20px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.legal-toc p { margin: 0 0 10px; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.legal-toc ol { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 22px; counter-reset: toc; }
.legal-toc li { break-inside: avoid; margin: 0 0 6px; counter-increment: toc; display: flex; gap: 10px; align-items: baseline; }
.legal-toc li::before { content: counter(toc, decimal-leading-zero); flex: none; font-size: .78rem; font-weight: 900; color: var(--accent-deep, #b47a06); }
.legal-toc a { color: var(--ink); text-decoration: none; font-weight: 600; }
.legal-toc a:hover { color: var(--link); text-decoration: underline; }
.k3-legal > h2 { counter-increment: lg; display: flex; gap: 14px; align-items: center; margin: 2em 0 .6em; font-size: clamp(1.25rem, 2.4vw, 1.5rem); scroll-margin-top: 96px; }
.k3-legal > h2::before { content: counter(lg, decimal-leading-zero); flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; font-size: .9rem; font-weight: 900; color: var(--accent-ink, #2b1d00); background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.k3-legal > ul:not([class]) { padding-left: 0; list-style: none; display: grid; gap: 10px; }
.k3-legal > ul:not([class]) > li { position: relative; margin: 0; padding: 12px 16px 12px 44px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.k3-legal > ul:not([class]) > li::before { content: ""; position: absolute; left: 16px; top: 18px; width: 12px; height: 12px; border-radius: 4px; background: linear-gradient(135deg, var(--brand-bright), var(--accent)); }
.k3-legal table { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 14px; overflow: hidden; }
.k3-legal th { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.k3-legal tr:last-child td { border-bottom: 0; }
@media (max-width: 640px) {
	.legal-toc ol { columns: 1; }
	.k3-legal table, .k3-legal tbody, .k3-legal tr, .k3-legal td { display: block; width: 100%; }
	.k3-legal tr:first-child { display: none; }
	.k3-legal tr { border-bottom: 1px solid var(--line); padding: 8px 0; }
	.k3-legal td { border: 0; padding: 4px 12px; }
	.k3-legal td:first-child { font-weight: 800; }
}

/* ---- the risk warning at the foot of every page */
.footer-risk { display: flex; gap: 12px; align-items: flex-start; margin: 28px 0 0; padding: 16px 18px; border-radius: 14px; background: #ffffff0a; border: 1px solid #ffffff1a; font-size: .84rem; line-height: 1.55; color: #a9c5c1; }
.footer-risk svg { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--accent); }
.footer-risk strong { color: #e7f3f1; }
.footer-risk a { color: var(--accent); font-weight: 700; white-space: nowrap; }