.product-nav { justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.product-nav .links { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.product-nav a { color: var(--ink-dim); text-decoration: none; font-size: 15px; }
.product-nav a:hover, .product-nav a[aria-current=page] { color: var(--amber); }
.nav__links a { color: var(--ink-dim); text-decoration: none; padding: 8px 10px; font-size: 14px; }
.nav__links a:hover { color: var(--amber); }
.nav-more { position: relative; align-self: center; color: var(--ink-dim); }
.nav-more summary { cursor: pointer; padding: 8px 10px; font-size: 14px; }
.nav-more > div { position: absolute; right: 0; min-width: 200px; display: grid; background: var(--surface); border: 1px solid #536083; padding: 10px; border-radius: 10px; z-index: 70; box-shadow: 0 8px 20px #0008; }
.nav-more button { text-align: left; }
.product-page { padding-top: 54px; }
.product-page h1 { font: 700 clamp(25px, 4vw, 43px)/1.3 var(--font-display); max-width: 850px; margin: 10px 0 20px; }
.product-page h2 { font: 600 23px/1.4 var(--font-body); margin-bottom: 14px; }
.product-page .lead { color: var(--ink-dim); font-size: 20px; max-width: 730px; margin-bottom: 28px; }
.eyebrow { color: var(--cyan); text-transform: uppercase; font-size: 13px; letter-spacing: 2px; }
.product-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; margin: 26px 0; }
.product-card { border: 1px solid #344065; background: var(--surface); padding: 28px; border-radius: 18px; }
.product-card p { margin-bottom: 15px; }
.product-card ul { padding-left: 22px; margin: 18px 0 24px; }
.product-card li { margin: 9px 0; }
.product-card--plus { border-color: #b07738; background: linear-gradient(130deg,#242b44,#171d33); }
.product-price { font: 700 36px var(--font-display); margin: 16px 0 8px; color: var(--amber); }
.product-price small { font: 400 16px var(--font-body); color: var(--ink-dim); }
.product-note { color: var(--ink-dim); font-size: 15px; margin: 12px 0; }
.product-status { min-height: 26px; margin: 12px 0; color: var(--cyan); overflow-wrap: anywhere; }
.product-status.error { color: var(--red); }
.product-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 22px 0; }
.product-page label { display: grid; gap: 7px; margin-bottom: 16px; color: var(--ink-dim); }
.product-page input, .product-page select { width: 100%; padding: 11px 14px; border: 1px solid #536083; border-radius: 8px; background: var(--bg-deep); color: var(--ink); font: inherit; }
.product-page button:disabled { opacity: .55; cursor: not-allowed; }
.product-page details { padding: 17px 0; border-bottom: 1px solid #344065; }
.product-page summary { cursor: pointer; font-weight: 600; }
.product-page details p { color: var(--ink-dim); margin-top: 12px; }
.training-hud { display: flex; gap: 28px; flex-wrap: wrap; font: 500 21px var(--font-mono); margin: 20px 0; }
.training-target { min-height: 160px; padding: 26px; background: var(--bg-deep); border: 2px solid #435174; border-radius: 12px; font: 400 22px/1.9 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; cursor: text; }
.training-target .done { color: var(--cyan); }
.training-target .current { background: var(--amber); color: var(--bg-deep); border-bottom: 3px solid var(--amber); }
.training-target.wrong { border-color: var(--red); }
.training-target.no-hints .current { background: transparent; color: var(--ink); border-bottom-color: var(--ink); }
.training-progress { width: 100%; accent-color: var(--cyan); height: 10px; }
.comparison { width: 100%; border-collapse: collapse; margin: 22px 0; }
.comparison th, .comparison td { padding: 12px; text-align: left; border-bottom: 1px solid #344065; }
.product-footer { max-width: 1080px; margin: 20px auto; padding: 20px; color: var(--ink-dim); }
.product-footer a { color: var(--ink-dim); margin-right: 15px; }
.consent-box { position: fixed; bottom: 16px; left: 16px; right: 16px; z-index: 100; max-width: 600px; padding: 20px; background: #1f2745; border: 1px solid #536083; border-radius: 14px; box-shadow: 0 6px 30px #0008; }
.consent-box p { margin-bottom: 12px; }
@media(max-width:650px) { .product-grid { grid-template-columns: 1fr; } .product-page { padding-top: 25px; } .product-card { padding: 20px; } .product-nav .links { gap: 12px; } .training-target { font-size: 18px; padding: 15px; } .comparison th,.comparison td { padding: 8px 4px; font-size: 14px; } }
