*{box-sizing:border-box}
:root{font-family:Inter,"Segoe UI",Arial,sans-serif;color:#102344;background:#fff;font-synthesis:none;--profit-green:#087f5b}
body{margin:0}
.shell{max-width:1536px;padding-inline:clamp(24px,5.2vw,84px);margin:auto}
.masthead{height:90px;border-bottom:1px solid #e4e9f0;display:flex;align-items:center}
.brand{display:inline-flex;align-items:center;gap:11px;font-size:29px;font-weight:750;letter-spacing:-1.6px}
.brand img{width:34px;height:34px;color:#2064ee}
.hero{display:grid;grid-template-columns:minmax(320px,.79fr) minmax(500px,1.21fr);gap:clamp(24px,3.2vw,52px);align-items:center;padding-block:clamp(70px,10vh,120px)}
.kicker{display:inline-flex;gap:9px;align-items:center;color:#506079;font-weight:600;font-size:12px;letter-spacing:.02em}
.kicker:before{content:"";display:block;width:18px;height:2px;background:#8d9caa}
h1{margin:24px 0 22px;font-size:clamp(56px,5.3vw,81px);line-height:1.035;font-weight:720;letter-spacing:-.055em}
h1 span{color:var(--profit-green)}
.intro{max-width:410px;margin:0;color:#506079;font-size:clamp(17px,1.35vw,20px);line-height:1.56;letter-spacing:-.025em}
.install{margin-top:32px;min-height:53px;display:inline-flex;align-items:center;justify-content:center;gap:11px;padding:0 22px;border:0;border-radius:8px;background:#2261e7;color:#fff;line-height:1.2;font-family:inherit;font-size:15px;font-weight:650;letter-spacing:-.01em;text-decoration:none}
.install svg{width:21px;height:21px}
.install[href]:hover{background:#154cc8}
.install:focus-visible{outline:3px solid #12356d;outline-offset:4px}
@media(max-width:980px){.hero{grid-template-columns:1fr;gap:38px;padding-block:44px}.masthead{height:76px}.intro{max-width:540px}h1{max-width:660px;font-size:clamp(50px,7.8vw,74px)}.desktop-break{display:none}.preview-wrap{max-width:760px;width:100%}}
@media(max-width:580px){.masthead{height:69px}.brand{font-size:25px}.brand img{width:29px;height:29px}.hero{padding-block:37px 26px;gap:32px}.shell{padding-inline:21px}h1{font-size:clamp(46px,10.5vw,59px);margin:16px 0}.intro{font-size:17px}.install{margin-top:22px;min-height:49px}.kicker{font-size:10px}.preview-wrap{min-width:0}}


  .ss-preview {
    --ss-navy: #162844;
    position: relative;
    isolation: isolate;
    width: 100%;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    container-type: inline-size;
    border: 1px solid #e0e7e9;
    border-radius: 16px;
    background-color: #f0f5f6;
    color: var(--ss-navy);
    font: 14px/1.35 Arial, Helvetica, sans-serif;
    text-align: left;
  }
  .ss-preview, .ss-preview * { box-sizing: border-box; }
  .ss-preview .ss-caption {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 24px 27px 26px;
    color: #50636c;
    font: 600 12px/1.3 "Segoe UI", Arial, sans-serif;
    letter-spacing: .01em;
  }
  .ss-caption svg { width: 14px; height: 14px; }
  .ss-window {
    position: relative;
    margin: 0 23px 18px;
    background: #fff;
    border: 1px solid #d7dfe3;
    border-radius: 10px;
    box-shadow: 0 12px 28px -16px #243d5140;
  }
  .ss-browserbar {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 37px;
    padding: 0 14px;
    background: #f6f8fb;
    border-radius: 9px 9px 0 0;
    border-bottom: 1px solid #dee5ec;
  }
  .ss-dots { display: flex; gap: 4px; }
  .ss-dots i { width: 6px; height: 6px; border-radius: 50%; background: #c0cad4; }
  .ss-url {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    color: #586b7f;
    border: 1px solid #e3e8ee;
    border-radius: 5px;
    background: #fff;
    font: 500 10px/1.3 ui-monospace, Consolas, monospace;
  }
  .ss-url svg { width: 10px; height: 10px; }
  .ss-storehead {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 49px;
    margin: 0 17px;
    border-bottom: 1px solid #e4e8ee;
  }
  .ss-ebay { display: inline-flex; font: 400 32px/.9 Arial, sans-serif; letter-spacing: -3px; padding-right: 4px; }
  .ss-ebay span:nth-child(1) { color: #df3028; }
  .ss-ebay span:nth-child(2) { color: #2469ac; }
  .ss-ebay span:nth-child(3) { color: #dea800; }
  .ss-ebay span:nth-child(4) { color: #6b9e27; }
  .ss-crumb { border-left: 1px solid #dfe5ea; padding-left: 12px; color: #627287; font-size: 10px; }
  .ss-content {
    display: grid;
    grid-template-columns: minmax(0,.91fr) minmax(0,1.09fr);
    gap: 16px;
    padding: 17px 15px 17px 17px;
    align-items: center;
  }
  .ss-item { min-width: 0; align-self: start; }
  .ss-photo {
    display: block;
    width: 100%;
    height: auto; aspect-ratio: 1.25;
    object-fit: cover;
    border-radius: 7px;
    background: #eae9e5;
  }
  .ss-preview .ss-title { font-size: clamp(14px,2.8cqi,18px); font-weight: 700; letter-spacing: -.035em; line-height: 1.26; margin: 13px 0 5px; }
  .ss-title { min-height: 2.52em; }
  .ss-photo.ss-golf { object-fit: contain; background: #e9e6e1; }
  .ss-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 23px 18px; }
  .ss-controls[hidden], .ss-window[hidden] { display: none; }
  .ss-position { font-size: 12px; color: #50636c; font-variant-numeric: tabular-nums; }
  .ss-buttons { display: flex; gap: 5px; }
  .ss-buttons button { min-width: 40px; min-height: 40px; padding: 7px 10px; color: #284238; background: transparent; border: 1px solid #cbd8d3; border-radius: 6px; font: 600 12px/1 Arial, sans-serif; cursor: pointer; }
  .ss-buttons button:hover { background: #e2ebe7; }
  .ss-buttons button:focus-visible { outline: 2px solid #087f5b; outline-offset: 3px; }
  .ss-buttons .ss-prev, .ss-buttons .ss-next { font-size: 20px; }
  .ss-preview .ss-condition { font-size: 12px; color: #647184; margin: 0; }
  .ss-preview .ss-price { margin: 13px 0 0; font-size: 25px; font-weight: 700; line-height: 1; letter-spacing: -.045em; color: #15212d; }
  .ss-panel {
    border: 1px solid #d0ded8;
    border-radius: 12px;
    background: #fff;
    padding: 0 14px 14px;
    box-shadow: 0 5px 16px #1d49310c;
  }
  .ss-panelhead { display: flex; align-items: center; gap: 7px; padding: 12px 0; }
  .ss-mark {
    display: grid; place-items: center; width: 25px; height: 25px;
  }
  .ss-mark img { width: 25px; height: 25px; }
  .ss-preview .ss-panelname { font-size: 17px; font-weight: 750; line-height: 1; letter-spacing: -.055em; }
  .ss-profit {
    position: relative;
    background: #eef7f2;
    border: 1px solid #d9e8df;
    border-radius: 8px;
    padding: 12px 14px;
  }
  .ss-profit .ss-profittitle { display: block; color: #336551; font-weight: 600; font-size: 12px; }
  .ss-profit strong { display: block; color: var(--profit-green); font-size: 52px; font-weight: 700; line-height: 1.09; letter-spacing: -.055em; }
  .ss-preview .ss-figtitle { margin: 15px 0 6px; color: #596980; font: 600 11px/1.4 "Segoe UI", Arial, sans-serif; letter-spacing: .01em; }
  .ss-figures { margin: 0; padding: 0; font-size: 13px; }
  .ss-figures > div { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; padding: 6px 0; border-bottom: 1px solid #e7edf3; }
  .ss-figures > div:last-child { border: 0; padding-bottom: 0; }
  .ss-figures dt { margin: 0; color: #43536a; font-weight: 400; }
  .ss-figures dd { margin: 0; white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; }
  @container (max-width: 500px) {
    .ss-preview .ss-caption { margin: 19px 19px 18px; }
    .ss-window { margin: 0 12px 17px; }
    .ss-content { grid-template-columns: minmax(0,.8fr) minmax(190px,1.2fr); gap: 10px; padding: 12px; }
    .ss-panel { padding: 0 11px 13px; }
    .ss-photo { aspect-ratio: .82; }
    .ss-figures { font-size: 12px; }
    .ss-profit strong { font-size: 48px; }
  }
  @container (max-width: 388px) {
    .ss-content { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
    .ss-item { display: grid; grid-template-columns: 52px 1fr; column-gap: 9px; align-items: center; align-self: stretch; }
    .ss-photo { grid-row: 1 / 3; width: 52px; height: 52px; }
    .ss-preview .ss-title { margin: 0; align-self: end; font-size: 13px; }
    .ss-title { min-height: 0; }
    .ss-preview .ss-condition { display: none; }
    .ss-preview .ss-price { margin: 3px 0 0; font-size: 17px; align-self: start; }
    .ss-figures { font-size: 14px; }
    .ss-profit strong { font-size: 50px; }
    .ss-storehead { height: 38px; margin: 0 12px; }
    .ss-ebay { font-size: 27px; }
    .ss-browserbar { height: 28px; }
  }

@keyframes panel-open {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .ss-window.is-current {
    animation: panel-open 450ms cubic-bezier(.2,.7,.2,1) both;
  }
}
footer.shell{margin-top:auto;color:#63718a;padding-block:18px;border-top:1px solid #e4e9f0;font-size:13px}body{min-height:100svh;display:flex;flex-direction:column}.shell{width:100%;margin-block:0}.hero{flex:1}