:root{--sp-navy:#073f69;--sp-blue:#087fbd;--sp-pale:#eef8fc;--sp-line:#b8dced;--sp-ink:#092d49;--sp-gold:#b67b14}.sprec-page{background:#f7fbfd;color:var(--sp-ink)}.sprec{width:min(1120px,calc(100% - 32px));margin:auto;padding:28px 0 120px}.sprec *{box-sizing:border-box;min-width:0}.sprec a{color:inherit}.sprec h1,.sprec h2,.sprec h3{overflow-wrap:normal;word-break:keep-all;line-break:strict}.sprec h1{font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.24;margin:.25rem 0 1rem}.sprec h2{font-size:clamp(1.6rem,3vw,2.35rem);line-height:1.3;margin:.2rem 0 1rem}.sprec h3{font-size:1.15rem;line-height:1.45;margin:.15rem 0}.sprec-breadcrumb{display:flex;gap:.45rem;flex-wrap:wrap;font-size:.84rem;margin-bottom:1.3rem}.sprec-kicker{color:#006da8;font-weight:800;margin:0 0 .35rem}.sprec-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(390px,.95fr);gap:28px;align-items:center;padding:clamp(26px,5vw,54px);border-radius:28px;background:linear-gradient(135deg,#fff 0%,#e1f4fb 100%);box-shadow:0 18px 45px #0a4e7120}.sprec-hero>div>p{font-size:1.05rem;line-height:1.8;max-width:44rem}.sprec-hero__actions,.sprec-card__actions,.sprec-heading,.sprec-tray>div{display:flex;gap:10px;flex-wrap:wrap}.button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 16px;border:1px solid #0b8acb;border-radius:10px;font-weight:800;text-decoration:none;background:#fff;color:#0669a2;cursor:pointer}.button--official{color:#fff;background:#087db8;border-color:#087db8}.button--outline{background:#fff}.button--select[aria-pressed=true],.sprec-compact button[aria-pressed=true]{background:#e7f5fb;color:#075a8d}.button--large{min-height:56px;padding-inline:24px}.sprec-hero__faces{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-items:center}.sprec-hero__faces a{position:relative;display:block;padding:6px;border-radius:13px;background:#fff;box-shadow:0 8px 18px #082f4520}.sprec-hero__faces a:nth-child(2),.sprec-hero__faces a:nth-child(4){transform:translateY(15px)}.sprec-hero__faces img,.sprec-card__face img,.sprec-compact picture img,.sprec-composition img,.sprec-usecase img,.sprec-comparison img{display:block;width:100%;height:auto;aspect-ratio:1.586;object-fit:contain}.sprec-hero__faces span{position:absolute;right:7px;top:7px;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--sp-blue);color:#fff;font-size:.8rem;font-weight:800}.sprec-section{margin-top:64px}.sprec-selector{padding:28px;border:1px solid var(--sp-line);border-radius:24px;background:#fff}.sprec-purpose-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.sprec-purpose{min-height:88px;padding:15px;border:1px solid #a6d7ed;border-radius:16px;background:linear-gradient(135deg,#fff,#edf9fe);color:var(--sp-navy);text-align:left;cursor:pointer}.sprec-purpose b,.sprec-purpose span{display:block}.sprec-purpose b{font-size:1.05rem}.sprec-purpose span{margin-top:.5rem;font-size:.84rem}.sprec-purpose[aria-pressed=true]{border-color:var(--sp-blue);box-shadow:0 0 0 3px #0c91d630;background:#e1f5ff}.sprec-selector__notice,.sprec-intro{font-size:.92rem;line-height:1.75}.sprec-heading{justify-content:space-between;align-items:end}.sprec-top-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.sprec-card{position:relative;display:grid;grid-template-columns:180px minmax(0,1fr);gap:18px;padding:23px;border:1px solid #c6e1ee;border-radius:22px;background:#fff;box-shadow:0 8px 26px #093b5710}.sprec-card.is-purpose-match{border-color:#008ed2;box-shadow:0 0 0 3px #0095d430,0 10px 28px #093b5718}.sprec-card__rank{position:absolute;left:10px;top:10px;z-index:2;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--sp-navy);color:#fff;font-weight:800}.sprec-card__face{align-self:start;padding:7px;border-radius:14px;background:#eff9fd}.sprec-card__body{display:flex;flex-direction:column}.sprec-card__eyebrow{margin:0;color:#936010;font-weight:800;font-size:.88rem}.sprec-card h3 a{text-decoration:none}.sprec-score{margin:.6rem 0;color:#0873aa;font-weight:700}.sprec-score strong{font-size:1.45rem}.sprec-score span{font-size:.8rem}.sprec-card__reason{line-height:1.7;font-size:.92rem}.sprec-card__facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px;padding:0;margin:.25rem 0;list-style:none}.sprec-card__facts li{padding:.55rem 0;border-top:1px solid #d9edf5;font-size:.82rem}.sprec-card__facts b,.sprec-card__facts span{display:block}.sprec-card__facts b{color:#537289;font-size:.72rem}.sprec-fit{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:.55rem 0}.sprec-fit p{margin:0;padding:9px;border-radius:9px;background:#f0f9fc;font-size:.8rem;line-height:1.55}.sprec-fit b{display:block;color:#086e9f}.sprec-tags{display:flex;gap:5px;flex-wrap:wrap;margin:.3rem 0}.sprec-tags span{padding:4px 7px;border-radius:99px;background:#eef7fb;font-size:.72rem}.sprec-checked{font-size:.79rem;color:#577286}.sprec-card__actions{margin-top:auto}.sprec-card__actions .button{flex:1;font-size:.82rem;padding-inline:7px}.sprec-composition-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.sprec-composition{padding:21px;border-radius:18px;background:#fff;border:1px solid var(--sp-line)}.sprec-composition>p{font-size:.91rem;line-height:1.65}.sprec-composition>div{display:grid;grid-template-columns:repeat(auto-fit,minmax(95px,1fr));gap:9px}.sprec-composition a{font-size:.75rem;text-decoration:none}.sprec-composition a span,.sprec-composition a b{display:block;line-height:1.4;margin-top:4px}.sprec-composition a span{color:#1076a2}.sprec-quickcalc{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:25px;border:1px solid var(--sp-line);border-radius:20px;background:linear-gradient(135deg,#fff,#edf9fe)}.sprec-quickcalc fieldset{border:0;padding:0;margin:0}.sprec-quickcalc legend{font-size:1.05rem;font-weight:800;margin-bottom:9px}.sprec-pills{display:flex;gap:8px;flex-wrap:wrap}.sprec-pills button,.sprec-pills label{border:1px solid #acd8eb;border-radius:9px;background:#fff;padding:9px 11px;color:var(--sp-navy);font-weight:700;font-size:.86rem;cursor:pointer}.sprec-pills button[aria-pressed=true],.sprec-pills button:hover{background:var(--sp-blue);color:#fff}.sprec-pills input{width:88px;border:0;border-bottom:1px solid #80bad3;padding:2px;background:transparent}.sprec-quickcalc__fields{grid-column:1/-1;display:flex;gap:12px}.sprec-quickcalc__fields label{flex:1;font-weight:800}.sprec-quickcalc__fields input{display:block;width:100%;margin-top:6px;padding:11px;border:1px solid #a9d7e9;border-radius:9px}.sprec-quickcalc>p{grid-column:1/-1;margin:0;font-size:.89rem;line-height:1.6}.sprec-quickcalc>a{width:max-content}.sprec-privacy{color:#58758b}.sprec-compact-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.sprec-compact{padding:12px;border:1px solid var(--sp-line);border-radius:14px;background:#fff}.sprec-compact>span{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#eaf6fb;color:#056a9d;font-weight:800;font-size:.78rem}.sprec-compact picture{display:block;margin:7px 0}.sprec-compact h3{font-size:.9rem}.sprec-compact p{font-size:.75rem;line-height:1.45}.sprec-compact button{border:0;background:none;padding:0;color:#0577af;font-weight:800;cursor:pointer}.sprec-usecase-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.sprec-usecase{padding:17px;border:1px solid var(--sp-line);border-radius:17px;background:#fff}.sprec-usecase p{font-size:.84rem;line-height:1.6}.sprec-usecase>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.sprec-usecase a{text-decoration:none;font-size:.73rem}.sprec-usecase a b,.sprec-usecase a span{display:block;line-height:1.4;margin-top:4px}.sprec-usecase a span{color:#0876a8}.sprec-comparison__desktop{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));overflow:hidden;border:1px solid var(--sp-line);border-radius:17px;background:#fff}.sprec-comparison__desktop>article{padding:13px;border-right:1px solid #d6e9f1}.sprec-comparison__desktop>article:last-child{border-right:0}.sprec-comparison__desktop h3{font-size:.9rem}.sprec-comparison dl{margin:11px 0}.sprec-comparison dl div{padding:8px 0;border-top:1px solid #e1eef4}.sprec-comparison dt{font-size:.72rem;font-weight:800;color:#547288}.sprec-comparison dd{margin:4px 0 0;font-size:.78rem;line-height:1.5}.sprec-evidence{display:grid;grid-template-columns:1fr .9fr;gap:22px;padding:27px;border-radius:22px;background:var(--sp-navy);color:#fff}.sprec-evidence .sprec-kicker{color:#87ddff}.sprec-evidence>div>p{line-height:1.75}.sprec-evidence ul{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:0;margin:0;list-style:none}.sprec-evidence li{display:flex;flex-direction:column;justify-content:center;min-height:90px;padding:15px;border-radius:13px;background:#ffffff12;border:1px solid #ffffff33}.sprec-evidence li strong{font-size:1.8rem;color:#9fe7ff;margin-top:5px}.sprec-links>div{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.sprec-links a{padding:18px;border:1px solid var(--sp-line);border-radius:15px;background:#fff;text-decoration:none}.sprec-links b,.sprec-links span{display:block}.sprec-links span{font-size:.83rem;line-height:1.55;margin-top:7px}.sprec-method{padding:26px;border-left:5px solid var(--sp-blue);background:#fff}.sprec-method p{max-width:76ch;line-height:1.8}.sprec-tray{position:fixed;z-index:50;right:20px;bottom:20px;width:min(390px,calc(100% - 28px));padding:13px;border:1px solid #98cae1;border-radius:18px;background:#fffc;box-shadow:0 12px 30px #062a4050;backdrop-filter:blur(10px)}.sprec-tray p{margin:0 28px 9px 0;font-size:.88rem}.sprec-tray__close{position:absolute;right:11px;top:9px;border:0;background:none;font-size:1.3rem;color:#456}.sprec-tray [data-selected-faces]{display:flex;gap:6px;min-height:36px;margin-bottom:8px}.sprec-tray [data-selected-faces] button{display:grid;grid-template-columns:43px minmax(0,1fr);gap:4px;align-items:center;max-width:105px;border:0;background:#eaf6fa;border-radius:7px;padding:4px;text-align:left;font-size:.64rem;cursor:pointer}.sprec-tray [data-selected-faces] img{width:43px;height:28px;object-fit:contain}.sprec-tray__empty{font-size:.78rem;color:#617b8d}.sprec-tray a{flex:1;text-align:center;padding:9px;border-radius:8px;text-decoration:none;background:#087db8;color:#fff;font-size:.82rem;font-weight:800}.sprec-tray a[data-compare]{background:#fff;color:#086b9e;border:1px solid #0a84bd}.sprec-tray a[aria-disabled=true]{opacity:.55;pointer-events:none}
@media(max-width:900px){.sprec{width:min(100% - 24px,720px)}.sprec-hero{grid-template-columns:1fr}.sprec-top-grid,.sprec-composition-grid{grid-template-columns:1fr}.sprec-purpose-grid{grid-template-columns:repeat(2,1fr)}.sprec-compact-grid{grid-template-columns:repeat(3,1fr)}.sprec-usecase-grid{grid-template-columns:repeat(2,1fr)}.sprec-comparison__desktop{grid-template-columns:repeat(2,minmax(0,1fr))}.sprec-comparison__desktop>article{border-bottom:1px solid #d6e9f1}.sprec-evidence{grid-template-columns:1fr}.sprec-tray{right:12px;bottom:12px}}
@media(max-width:620px){.sprec{width:calc(100% - 24px);padding-top:16px;padding-bottom:168px}.sprec h1{font-size:1.9rem}.sprec h2{font-size:1.48rem}.sprec-section{margin-top:42px}.sprec-hero{padding:21px;border-radius:18px}.sprec-hero__actions .button{width:100%}.sprec-hero__faces{grid-template-columns:repeat(2,1fr)}.sprec-hero__faces a:nth-child(2),.sprec-hero__faces a:nth-child(4){transform:none}.sprec-hero__faces a:nth-child(5){display:none}.sprec-selector{padding:18px}.sprec-purpose-grid{grid-template-columns:1fr}.sprec-purpose{min-height:68px}.sprec-card{grid-template-columns:116px minmax(0,1fr);padding:16px;gap:12px}.sprec-card__facts,.sprec-fit{grid-template-columns:1fr}.sprec-card__actions{display:grid;grid-template-columns:1fr 1fr}.sprec-card__actions .button--official{grid-column:1/-1}.sprec-heading{align-items:start}.sprec-heading .button{font-size:.8rem}.sprec-quickcalc{grid-template-columns:1fr;padding:18px}.sprec-quickcalc__fields{grid-column:auto;flex-direction:column}.sprec-quickcalc>p{grid-column:auto}.sprec-quickcalc>a{width:100%}.sprec-compact-grid{grid-template-columns:repeat(2,1fr)}.sprec-usecase-grid{grid-template-columns:1fr}.sprec-usecase>div{grid-template-columns:repeat(3,minmax(0,1fr))}.sprec-comparison__desktop{grid-template-columns:1fr}.sprec-evidence{padding:20px}.sprec-evidence ul{grid-template-columns:1fr 1fr}.sprec-links>div{grid-template-columns:1fr}.sprec-tray{left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));width:auto;padding:10px 12px;border-radius:14px}.sprec-tray [data-selected-faces]{overflow-x:auto}.sprec-tray [data-selected-faces] button{flex:0 0 100px}.sprec-tray>div:last-child{display:grid;grid-template-columns:1fr 1fr}.sprec-tray a{padding:11px 6px}.sprec-card__reason{font-size:.86rem}}
.sprec-filter-tabs{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 8px}.sprec-filter-tabs button{min-height:44px;padding:9px 16px;border:1px solid #89cbe8;border-radius:999px;background:#fff;color:#075681;font:inherit;font-weight:800;cursor:pointer}.sprec-filter-tabs button[aria-pressed=true]{border-color:#075681;background:#075681;color:#fff}.sprec-filter-status{margin:0 0 16px;color:#41667d;font-size:.9rem}.sprec-candidate-grid [hidden]{display:none}

/* Keep the selection tray inside the visible Safari viewport and make its close state usable. */
.sprec-tray {
  box-sizing: border-box;
  width: 390px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  right: 12px;
  right: max(12px, env(safe-area-inset-right));
  bottom: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  overflow: auto;
}

.sprec-tray [data-selected-faces] button {
  min-width: 0;
  overflow: hidden;
}

.sprec-tray [data-selected-faces] span {
  overflow-wrap: anywhere;
}

.sprec-tray.is-collapsed {
  width: auto;
  max-width: calc(100vw - 24px);
  max-height: none;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  overflow: visible;
}

.sprec-tray.is-collapsed > :not(.sprec-tray__close) {
  display: none;
}

.sprec-tray.is-collapsed .sprec-tray__close {
  position: static;
  display: block;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid #98cae1;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 8px 22px #062a4038;
  color: #075681;
  font: inherit;
  font-size: .82rem;
  font-weight: 800;
  cursor: pointer;
}

@media (max-width: 620px) {
  .sprec-tray:not(.is-collapsed) {
    left: 8px;
    right: 8px;
    width: auto;
    max-width: none;
  }
}

.sprec-card__name-line {
  display: inline-block;
  white-space: nowrap;
}

/* The recommendation rail occupies the intentional media-column space below each card face. */
.sprec-card__media {
  display: flex;
  flex-direction: column;
  align-self: start;
  gap: 10px;
}

.sprec-card__face {
  align-self: auto;
}

.sprec-card__recommendation {
  padding: 10px;
  border: 1px dashed #087fbd;
  border-radius: 12px;
  background: #f8fcff;
}

.sprec-card__recommendation > p {
  margin: 0;
  color: #056a9d;
  font-size: .8rem;
  font-weight: 900;
  text-align: center;
}

.sprec-card__recommendation-legend {
  display: block;
  margin: 3px 0 7px;
  color: #52748a;
  font-size: .63rem;
  text-align: center;
  white-space: nowrap;
}

.sprec-card__recommendation ul {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sprec-card__recommendation li {
  display: grid;
  grid-template-columns: 1.1em minmax(0, 1fr);
  column-gap: 4px;
  align-items: start;
  padding: 4px 0;
  border-top: 1px solid #d9edf5;
  font-size: .69rem;
  line-height: 1.35;
}

.sprec-card__recommendation-mark {
  font-size: .98rem;
  font-weight: 900;
  line-height: 1;
}

.sprec-card__recommendation-mark--strong { color: #0a8e58; }
.sprec-card__recommendation-mark--available { color: #087fbd; }
.sprec-card__recommendation-mark--confirm { color: #a36b14; }

.sprec-card__recommendation-label { font-weight: 800; }

.sprec-card__recommendation-value {
  grid-column: 2;
  color: #496a7e;
  font-size: .64rem;
  overflow-wrap: anywhere;
}

.sprec-card__network-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  align-items: center;
}

.sprec-card__network-logos img {
  display: block;
  width: 24px;
  height: 15px;
  object-fit: contain;
}

@media (max-width: 620px) {
  .sprec-card__recommendation { padding: 8px 6px; }
  .sprec-card__recommendation > p { font-size: .64rem; letter-spacing: -.04em; }
  .sprec-card__recommendation-legend { font-size: .55rem; letter-spacing: -.02em; }
  .sprec-card__recommendation li { font-size: .62rem; }
  .sprec-card__recommendation-value { font-size: .58rem; }
  .sprec-card__network-logos img { width: 20px; height: 13px; }
}