/* sortpatch.com — core styles. Radius asymmetric by design: keeps the wireframe feel without a stock rounded rectangle. */
:root {
  --ice: #d8eaff;
  --void: #000000;
  --carbon: #0d0d0f;
  --graphite: #232529;
  --slate: #2b2f33;
  --iron: #41464c;
  --steel: #565e66;
  --fog: #8f9aa4;
  --cobalt: #1f58f2;
  --orange: #ff4105;
  --font-display: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'JBMono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --maxw: 1200px;
  --radius-a: 20px 4px 20px 4px;
}

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-var.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'JBMono';
  src: url('/assets/fonts/jetbrains-mono.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--void);
  color: var(--ice);
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--ice); }
h1, h2, h3 { font-weight: 400; line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.2rem, 5vw, 4rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
p { color: var(--ice); }

.sp7-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fog);
  margin: 0 0 12px;
}

/* header */
.sp7-header { position: sticky; top: 0; z-index: 20; background: rgba(0,0,0,.86); backdrop-filter: blur(6px); }
.sp7-header__inner { max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; }
.sp7-brand { font-family: var(--font-display); font-size: 18px; text-decoration: none; display: flex; align-items: center; gap: 10px; }
.sp7-brand__mark { width: 14px; height: 14px; background: var(--cobalt); display: inline-block; border-radius: var(--radius-a); }
.sp7-nav { display: flex; gap: 28px; }
.sp7-nav__link { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: var(--ice); padding-bottom: 4px; border-bottom: 1px solid transparent; }
.sp7-nav__link:hover, .sp7-nav__link[aria-current="page"] { color: var(--orange); border-bottom-color: var(--orange); }
.sp7-burger { display: none; background: none; border: 1px solid var(--ice); border-radius: var(--radius-a); width: 40px; height: 40px; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; }
.sp7-burger span { width: 18px; height: 1px; background: var(--ice); }
.sp7-mobile-nav { display: none; flex-direction: column; padding: 0 20px 20px; }
.sp7-mobile-nav a { padding: 10px 0; text-decoration: none; border-bottom: 1px solid var(--iron); font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.08em; }
@media (max-width: 860px) {
  .sp7-nav { display: none; }
  .sp7-burger { display: flex; }
  .sp7-mobile-nav.sp7-open { display: flex; }
}

.sp7-main { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

.sp7-crumbs { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--fog); margin: 22px 0; text-transform: uppercase; }
.sp7-crumbs a { color: var(--fog); text-decoration: none; }
.sp7-crumbs a:hover { color: var(--ice); }
.sp7-crumbs__sep { margin: 0 8px; }

/* hero */
.sp7-hero { padding: 60px 0 40px; text-align: center; }
.sp7-hero .sp7-eyebrow { text-align: center; animation: sp7-in-fade .5s ease both; }
.sp7-accent { color: var(--cobalt); }
.sp7-hero__lead { max-width: 62ch; margin: 20px auto 0; color: var(--fog); font-size: 1.15rem; animation: sp7-in-fade .5s ease .35s both; }
.sp7-hero__cta { margin-top: 32px; animation: sp7-in-fade .5s ease .62s both; }

/* hero on-load stagger — LCP element (h1) moves via transform ONLY, never opacity, so it
   paints immediately and Lighthouse doesn't count the reveal as delaying LCP */
.sp7-hero h1 { animation: sp7-in-shift .5s cubic-bezier(.2,.7,.2,1) .1s both; }
@keyframes sp7-in-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes sp7-in-shift { from { transform: translateY(14px); } to { transform: none; } }

/* buttons */
.sp7-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; padding: 13px 22px; border-radius: var(--radius-a); border: 1px solid var(--orange); color: var(--orange); background: transparent; cursor: pointer; transition: transform .15s ease, background-color .15s ease; }
.sp7-btn:hover, .sp7-btn:focus-visible { background: rgba(255,65,5,.12); transform: translateY(-2px); }
.sp7-btn:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; }
.sp7-btn--ghost { border-color: var(--ice); color: var(--ice); }
.sp7-btn--ghost:hover { background: rgba(216,234,255,.08); }
.sp7-btn--sm { padding: 8px 16px; font-size: 11px; }
.sp7-card__actions { margin-top: 10px; }
.sp7-review__playcta { margin: 4px 0 18px; }

/* sections generic — separated by surface-color stepping, not by divider lines (P18.1: cards already carry their own hairline border) */
section { padding: 56px 24px; border-radius: 22px; }
.sp7-catalog { background: var(--graphite); }
.sp7-faq { background: var(--carbon); }
.sp7-about-teaser { background: var(--graphite); }

/* catalog cards — alternating media/body per card (image-left / image-right chereduется) */
.sp7-catalog__grid { display: grid; gap: 28px; }
.sp7-card { display: grid; grid-template-columns: 140px 1fr; gap: 20px; align-items: center; background: var(--carbon); border: 1px solid rgba(216,234,255,.18); border-radius: 16px; padding: 22px; }
.sp7-card--reverse { grid-template-columns: 1fr 140px; }
.sp7-card--reverse .sp7-card__media { order: 2; }
.sp7-card__media img { border-radius: 12px; width: 100%; height: auto; }
.sp7-card__body h3 { font-size: 1.3rem; margin-bottom: 6px; }
.sp7-card__body h3 a { text-decoration: none; }
.sp7-card__meta { font-family: var(--font-mono); font-size: 12px; color: var(--fog); letter-spacing: .04em; }
@media (max-width: 640px) {
  .sp7-card, .sp7-card--reverse { grid-template-columns: 1fr; }
  .sp7-card--reverse .sp7-card__media { order: 0; }
}

/* facts */
.sp7-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; background: var(--carbon); border: 1px solid rgba(216,234,255,.18); border-radius: 16px; padding: 24px; margin: 28px 0; }
.sp7-facts div { display: flex; flex-direction: column; gap: 4px; }
.sp7-facts dt { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--fog); }
.sp7-facts dd { margin: 0; }

/* review body */
.sp7-review, .sp7-compare, .sp7-reference, .sp7-about, .sp7-legal, .sp7-contact, .sp7-sitemap { padding: 30px 0 70px; max-width: 78ch; }
.sp7-review__verdict { font-size: 1.2rem; color: var(--fog); max-width: 62ch; }
.sp7-review__cover img, .sp7-review__shot img { border-radius: 16px; border: 1px solid rgba(216,234,255,.18); width: 100%; height: auto; }
.sp7-review__section { margin: 40px 0; }
.sp7-proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 40px 0; }
.sp7-proscons ul { padding-left: 20px; }
.sp7-score { font-family: var(--font-mono); font-size: 14px; letter-spacing: .04em; }
@media (max-width: 640px) { .sp7-proscons { grid-template-columns: 1fr; } }

.sp7-similar { border-top: 1px solid var(--iron); padding-top: 32px; margin-top: 50px; }
.sp7-similar__list { list-style: none; padding: 0; display: grid; gap: 14px; }
.sp7-similar__list a { display: flex; flex-direction: column; gap: 4px; text-decoration: none; padding: 16px; border: 1px solid rgba(216,234,255,.18); border-radius: var(--radius-a); }
.sp7-similar__list a:hover { border-color: var(--cobalt); }
.sp7-similar__list span { color: var(--fog); font-size: .9rem; }

/* tables — full container width, zebra instead of grid lines */
.sp7-table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
caption { text-align: left; color: var(--fog); font-size: .85rem; margin-bottom: 10px; font-family: var(--font-mono); letter-spacing: .04em; }
th, td { text-align: left; padding: 12px 14px; }
thead th { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--fog); border-bottom: 1px solid var(--iron); }
tbody tr:nth-child(odd) { background: var(--carbon); }
tbody th { font-weight: 400; }
.sp7-table-note { color: var(--fog); font-size: .85rem; margin-top: 14px; }

/* faq */
.sp7-accordion details { border: 1px solid rgba(216,234,255,.18); border-radius: var(--radius-a); padding: 16px 20px; margin-bottom: 12px; }
.sp7-accordion summary { cursor: pointer; font-family: var(--font-display); font-size: 1.05rem; }
.sp7-accordion p { color: var(--fog); margin: 12px 0 0; }

/* amazon */
.sp7-amazon__list { list-style: none; padding: 0; display: grid; gap: 10px; }
.sp7-amazon__list a { text-decoration: underline; }
.sp7-amazon__asin { font-family: var(--font-mono); font-size: 11px; color: var(--fog); margin-left: 8px; }
.sp7-amazon__disclaimer { color: var(--fog); font-size: .85rem; margin-top: 16px; }

/* footer */
.sp7-footer { background: var(--graphite); margin-top: 60px; }
.sp7-footer__inner { max-width: var(--maxw); margin: 0 auto; padding: 50px 20px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 30px; }
.sp7-footer__col { display: flex; flex-direction: column; gap: 8px; }
.sp7-footer__col a { text-decoration: none; color: var(--fog); font-size: .92rem; }
.sp7-footer__col a:hover { color: var(--ice); }
.sp7-footer__heading { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--fog); margin: 0 0 6px; }
.sp7-footer__desc { color: var(--fog); font-size: .88rem; }
.sp7-brand--footer { color: var(--ice); }
.sp7-footer__bottom { border-top: 1px solid var(--iron); padding: 18px 20px; text-align: center; font-size: .8rem; color: var(--fog); }
@media (max-width: 860px) { .sp7-footer__inner { grid-template-columns: 1fr 1fr; } }

/* cookie banner */
.sp7-cookiebar { position: fixed; left: 16px; right: 16px; bottom: 16px; max-width: 560px; margin: 0 auto; background: var(--carbon); border: 1px solid var(--ice); border-radius: 16px; padding: 20px; z-index: 50; }
.sp7-cookiebar p { font-size: .88rem; color: var(--fog); margin: 0 0 14px; max-width: none; }
.sp7-cookiebar__actions { display: flex; gap: 12px; }

/* legal typography */
.sp7-legal__section h2 { font-size: 1.2rem; margin-top: 36px; }
.sp7-legal__section p { color: var(--fog); }
.sp7-cookie-table { margin-top: 10px; }

.sp7-404 { padding: 100px 0; text-align: center; }

.sp7-totop { position: fixed; right: 20px; bottom: 20px; width: 44px; height: 44px; border-radius: var(--radius-a); border: 1px solid var(--ice); background: var(--carbon); color: var(--ice); font-size: 18px; cursor: pointer; z-index: 40; }
.sp7-totop:hover, .sp7-totop:focus-visible { border-color: var(--orange); color: var(--orange); }

/* scroll reveal — direction encoded per element via data-reveal, distance/character
   is this domain's own (sp7): longer travel + slight overshoot easing vs. flatter siblings */
[data-reveal] { opacity: 0; transition: opacity .65s cubic-bezier(.16,.9,.28,1), transform .65s cubic-bezier(.16,.9,.28,1); transition-delay: var(--sp7-delay, 0ms); will-change: opacity, transform; }
[data-reveal="left"] { transform: translateX(-52px); }
[data-reveal="right"] { transform: translateX(52px); }
[data-reveal="up"] { transform: translateY(34px); }
[data-reveal="scale"] { transform: scale(.9) translateY(18px); }
[data-reveal].sp7-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { transition: none; opacity: 1; transform: none; }
  .sp7-hero .sp7-eyebrow, .sp7-hero h1, .sp7-hero__lead, .sp7-hero__cta { animation: none; opacity: 1; transform: none; }
}