/* Scope3D pricing — the estimator and the feature grid.
   Loaded only on /pricing. Pairs with assets/js/s3d-pricing.js. */

/* ── estimator ─────────────────────────────────────────────────────────────── */
.s3p{ display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,.85fr); gap:28px;
      align-items:start; max-width:1180px; margin:0 auto; }
.s3p-form{ background:#fff; border:1px solid rgba(22,21,25,.10); border-radius:18px; padding:26px 26px 24px; }
.s3p-field{ margin:0 0 18px; }
.s3p-field:last-child{ margin-bottom:0; }
.s3p-field > label:not(.s3p-check){ display:block; font-size:12px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:#77767a; margin:0 0 7px; }
.s3p-field select, .s3p-field input[type="number"]{
  width:100%; height:48px; padding:0 14px; font-size:15px; color:#161519;
  border:1px solid rgba(22,21,25,.16); border-radius:10px; background:#fff; }
.s3p-field select:focus, .s3p-field input:focus{ outline:2px solid #6248ff; outline-offset:1px; }
.s3p-sizerow{ display:flex; gap:10px; align-items:center; }
.s3p-sizerow input{ flex:1 1 auto; min-width:0; }
.s3p-unit{ flex:0 0 auto; font-size:14px; color:#77767a; white-space:nowrap; }
.s3p-basis{ display:block; margin-top:6px; font-size:12.5px; color:#a3a2a6; }
.s3p-seg{ display:flex; gap:8px; }
.s3p-seg label{ flex:1; position:relative; }
.s3p-seg input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.s3p-seg span{ display:block; text-align:center; padding:11px 8px; font-size:14px;
  border:1px solid rgba(22,21,25,.16); border-radius:10px; cursor:pointer; }
.s3p-seg input:checked + span{ border-color:#6248ff; background:#f2f0ff; color:#4b34d6; font-weight:600; }
.s3p-seg input:focus-visible + span{ outline:2px solid #6248ff; outline-offset:1px; }
.s3p-check{ display:flex !important; gap:11px; align-items:flex-start; padding:14px 16px;
  border:1px solid rgba(22,21,25,.14); border-radius:12px; background:#fafaf8; cursor:pointer;
  /* the theme uppercases and letter-spaces form labels; this row is a sentence, not a label */
  text-transform:none !important; letter-spacing:normal !important; font-weight:400 !important;
  color:#161519 !important; font-size:14px; }
.s3p-check input[type="checkbox"]{ appearance:auto; -webkit-appearance:checkbox; opacity:1;
  position:static; margin:2px 0 0; width:17px; height:17px; accent-color:#6248ff; flex:0 0 auto; }
.s3p-check b{ display:block; font-size:14.5px; font-weight:600; color:#161519; margin-bottom:2px;
  text-transform:none; letter-spacing:normal; }
.s3p-check > span > span{ display:block; font-size:13px; line-height:1.45; color:#77767a;
  font-weight:400; text-transform:none; letter-spacing:normal; }

/* ── the two lines ─────────────────────────────────────────────────────────── */
.s3p-out{ position:sticky; top:96px; }
.s3p-res{ display:grid; gap:2px; background:rgba(22,21,25,.10);
  border:1px solid rgba(22,21,25,.10); border-radius:18px; overflow:hidden; }
.s3p-line{ background:#fff; padding:24px 26px; }
.s3p-lbl{ display:block; font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:10.5px;
  letter-spacing:.16em; text-transform:uppercase; margin:0 0 8px; }
.s3p-build .s3p-lbl{ color:#4b34d6; }
.s3p-keep  .s3p-lbl{ color:#0a7a45; }
.s3p-line b{ display:block; font-size:38px; font-weight:700; letter-spacing:-.03em;
  line-height:1; color:#161519; font-variant-numeric:tabular-nums; }
.s3p-line b i{ font-style:normal; font-size:17px; font-weight:500; color:#77767a; margin-left:3px; }
.s3p-sub{ display:block; margin-top:9px; font-size:13px; line-height:1.5; color:#77767a; }
.s3p-tot{ margin:14px 2px 0; font-size:13.5px; color:#77767a; }
.s3p-err{ padding:22px; border:1px dashed rgba(22,21,25,.2); border-radius:14px; color:#77767a; }
/* When the twin already exists the build line is an answer, not a price. */
.s3p.is-mapped .s3p-build b{ font-size:26px; color:#0a7a45; }

/* ── feature grid (shared shape with clickpad.com) ─────────────────────────── */
.s3f{ list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(272px,1fr)); gap:1px;
  /* The gap used to be the separator, which also painted trailing empty cells grey whenever
     the card count did not fill the last row. Each card draws its own hairline instead. */
  background:#fff; border:1px solid rgba(22,21,25,.10);
  border-radius:18px; overflow:hidden; }
.s3f li{ background:#fff; padding:22px 22px; display:flex; gap:13px; align-items:flex-start;
  box-shadow:0 0 0 1px rgba(22,21,25,.10); }
.s3f svg{ width:20px; height:20px; flex:0 0 auto; margin-top:2px; color:#0a7a45;
  fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.s3f b{ display:block; font-size:15px; font-weight:600; letter-spacing:-.012em; color:#161519; margin-bottom:3px; }
.s3f span{ display:block; font-size:13.5px; line-height:1.5; color:#77767a; }

@media (max-width:980px){
  /* minmax(0,…), not 1fr: a bare 1fr is minmax(auto,1fr), so any wide descendant — the
     nowrap chip row — drags the column past the viewport instead of scrolling inside it. */
  .s3p{ grid-template-columns:minmax(0,1fr); }
  .s3p-out{ position:static; }
}
@media (max-width:560px){
  .s3p-form{ padding:20px; }
  .s3p-line{ padding:20px; }
  .s3p-line b{ font-size:32px; }
  .s3f{ grid-template-columns:1fr; }
}

/* The fine print, as cards. One tone quieter than the feature grid above it so it reads as
   "also true" rather than competing with "what you get". */
.s3f--terms li{ padding:20px; }
.s3f--terms svg{ color:#77767a; }
.s3f--terms b{ font-size:14.5px; }
.s3f--terms span{ font-size:13px; }
.s3f--terms a{ color:#6248ff; text-decoration:underline; }
.s3f-fine{ margin:16px auto 0; max-width:62ch; text-align:center; font-size:11.5px;
  line-height:1.55; color:#a3a2a6; }

/* ── question zero: the property search band ──────────────────────────────────
   The picker is not the first of five questions, it is the thing you do before the
   other four mean anything — so it owns the top band of the card instead of sitting
   in the stack. Tinted band, white input WELL, magnifier, 58px against the 48px
   fields below it. The committed type lives in the chip under the bar, not in the
   input, so the placeholder is visible on load and the choice stays readable while
   the box is being typed over. */

/* .s3p-cats and .s3p-bar-x declare display, which would beat the UA's [hidden] rule. */
.s3p .s3p-search [hidden],
.s3p .s3p-search[hidden]{ display:none !important; }

/* The bleed tracks .s3p-form's padding (26px desktop / 20px at 560px). Change one, change both. */
.s3p-search{
  position:relative; z-index:2;
  margin:-26px -26px 0; padding:22px 26px 20px;
  background:#fafaf8;
  border-bottom:1px solid rgba(22,21,25,.10);
  border-radius:17px 17px 0 0;   /* the card's 18px radius less its 1px border */
}
.s3p-search-eyebrow{
  display:block; font-family:ui-monospace,"SF Mono",Menlo,monospace;
  font-size:10.5px; line-height:1; letter-spacing:.16em; text-transform:uppercase;
  color:#4b34d6; margin:0 0 8px;
}
.s3p-search-q{
  display:block; margin:0 0 12px; cursor:pointer;
  font-size:19px; line-height:1.25; font-weight:600; letter-spacing:-.02em;
  color:#161519; text-transform:none; letter-spacing:-.02em;
}
.s3p-then{
  margin:18px 0 16px; font-family:ui-monospace,"SF Mono",Menlo,monospace;
  font-size:10.5px; line-height:1; letter-spacing:.16em; text-transform:uppercase;
  color:#a3a2a6;
}

/* the bar ------------------------------------------------------------------ */
.s3p-anchor{ position:relative; }
.s3p-bar{
  display:flex; align-items:center; height:58px;
  background:#fff; border:1px solid rgba(22,21,25,.16); border-radius:14px;
  box-shadow:inset 0 1px 2px rgba(22,21,25,.06);
  transition:border-color .12s ease, box-shadow .12s ease;
}
@media (hover:hover){ .s3p-bar:hover{ border-color:rgba(22,21,25,.30); } }
.s3p-bar:focus-within{
  border-color:#6248ff;
  box-shadow:0 0 0 4px rgba(98,72,255,.12), inset 0 1px 2px rgba(22,21,25,0);
}
.s3p-bar-icon{
  flex:0 0 auto; width:20px; height:20px; margin-left:17px;
  color:#77767a; fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round; transition:color .12s ease;
}
.s3p-bar:focus-within .s3p-bar-icon{ color:#6248ff; }

.s3p-search input[type="search"]{
  flex:1 1 auto; min-width:0; height:100%; margin:0; padding:0 6px 0 12px;
  font-family:inherit; font-size:16.5px; letter-spacing:-.01em; color:#161519;
  background:transparent; border:0; border-radius:14px;
  -webkit-appearance:none; appearance:none;
}
.s3p-search input[type="search"]:focus{ outline:none; }
.s3p-search input[type="search"]::placeholder{ color:#a3a2a6; opacity:1; }
.s3p-search input[type="search"]::-webkit-search-decoration,
.s3p-search input[type="search"]::-webkit-search-cancel-button,
.s3p-search input[type="search"]::-webkit-search-results-button{
  -webkit-appearance:none; display:none;
}

.s3p-bar-key{
  display:none; flex:0 0 auto; margin-right:14px; padding:3px 8px;
  font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:11px; line-height:1.35;
  color:#77767a; background:rgba(22,21,25,.04);
  border:1px solid rgba(22,21,25,.12); border-radius:6px;
}
@media (hover:hover) and (pointer:fine){
  .s3p-search.has-key .s3p-bar-key{ display:block; }
  .s3p-search.has-key .s3p-bar:focus-within .s3p-bar-key,
  .s3p-search.has-key.is-typed .s3p-bar-key{ display:none; }
}

.s3p-bar-x{                                   /* 44x44 hit area, 17px glyph */
  display:none; flex:0 0 auto; width:44px; height:44px; margin-right:6px;
  align-items:center; justify-content:center;
  border:0; background:none; color:#77767a; border-radius:11px; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.s3p-search.is-typed .s3p-bar-x{ display:flex; }
.s3p-bar-x svg{ width:17px; height:17px; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; }
@media (hover:hover){ .s3p-bar-x:hover{ background:rgba(22,21,25,.06); color:#161519; } }
.s3p-bar-x:active{ background:rgba(22,21,25,.10); color:#161519; }
.s3p-bar-x:focus-visible{ outline:2px solid #6248ff; outline-offset:-3px; }

/* quick picks: what is in the box, without opening it. One tap commits. ------ */
/* Wraps on the desktop card, where a clipped row just looks broken; scrolls in one line
   on a phone, where wrapping eight chips would eat four rows of the band. */
.s3p-quick{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:11px 0 0;
}
.s3p-quick::-webkit-scrollbar{ display:none; }
.s3p-quick-lbl{
  flex:0 0 auto; margin-right:2px; font-family:ui-monospace,"SF Mono",Menlo,monospace;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#a3a2a6;
}
.s3p-quick button{
  flex:0 0 auto; padding:6px 11px; font-family:inherit; font-size:12.5px; line-height:1.2;
  color:#494851; background:#fff; border:1px solid rgba(22,21,25,.14);
  border-radius:999px; cursor:pointer; white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
}
@media (hover:hover){
  .s3p-quick button:hover{ border-color:#6248ff; background:#f2f0ff; color:#4b34d6; }
}
.s3p-quick button:active{ background:#e9e5ff; border-color:#6248ff; }
.s3p-quick button:focus-visible{ outline:2px solid #6248ff; outline-offset:1px; }
.s3p-quick button.is-on{ border-color:#6248ff; background:#f2f0ff; color:#4b34d6; font-weight:600; }

/* the chip: what the prices are for, readable even while you type over the box -- */
.s3p-picked{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:0 9px;
  margin:12px 0 0; padding:10px 13px;
  background:#f2f0ff; border:1px solid rgba(98,72,255,.22); border-radius:11px;
}
.s3p-picked-lbl{
  flex:0 0 100%; margin-bottom:3px;
  font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:10px; line-height:1;
  letter-spacing:.14em; text-transform:uppercase; color:#4b34d6;
}
.s3p-picked b{ font-size:14.5px; font-weight:600; line-height:1.35;
  letter-spacing:-.01em; color:#161519; }
.s3p-picked .s3p-basis{ display:inline; margin:0; font-size:12.5px; color:#77767a; }

.s3p-sr{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* the popup ---------------------------------------------------------------- */
.s3p-pop{
  position:absolute; z-index:40; left:0; right:0; top:calc(100% + 8px);
  max-height:360px; overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  background:#fff; border:1px solid rgba(22,21,25,.14); border-radius:14px;
  box-shadow:0 18px 44px -12px rgba(8,14,22,.28);
}
.s3p-pop.is-up{ top:auto; bottom:calc(100% + 8px); }

.s3p-pop-head{
  position:sticky; top:0; z-index:2; display:flex; align-items:center;
  justify-content:space-between; gap:12px; height:34px; padding:0 13px;
  background:#fff; border-bottom:1px solid rgba(22,21,25,.10);
  font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; color:#77767a; white-space:nowrap;
}
.s3p-pop-hint{ display:none; color:#a3a2a6; letter-spacing:.08em; }
@media (hover:hover) and (pointer:fine){ .s3p-pop-hint{ display:block; } }

.s3p-cats{
  display:flex; gap:6px; padding:10px 13px 4px;
  min-width:0; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none;
  /* twelve categories never fit one row — fade the tail so it reads as "more", not "cut" */
  -webkit-mask-image:linear-gradient(90deg,#000 90%,transparent);
          mask-image:linear-gradient(90deg,#000 90%,transparent);
}
.s3p-cats::-webkit-scrollbar{ display:none; }
.s3p-cats button{
  flex:0 0 auto; padding:7px 12px; font-family:inherit; font-size:12.5px; line-height:1.2;
  color:#161519; background:#fff; border:1px solid rgba(22,21,25,.14);
  border-radius:999px; cursor:pointer; white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
}
.s3p-cats button i{ font-style:normal; color:#a3a2a6; margin-left:5px; }
@media (hover:hover){
  .s3p-cats button:hover{ border-color:#6248ff; background:#f2f0ff; color:#4b34d6; }
  .s3p-cats button:hover i{ color:#6248ff; }
}
.s3p-cats button:active{ background:#e9e5ff; border-color:#6248ff; }

.s3p-list{ margin:0; padding:4px 6px 6px; list-style:none; }
.s3p-list li[role="option"]{
  position:relative; padding:10px 34px 10px 13px; border-radius:8px;
  font-size:15px; line-height:1.3; color:#161519; cursor:pointer;
  scroll-margin-top:34px;                       /* clears the sticky count row */
  -webkit-tap-highlight-color:transparent;
}
.s3p-list li[role="option"] small{
  display:block; margin-top:2px; font-size:12px; line-height:1.35; color:#a3a2a6;
}
.s3p-list li[role="option"] em{ font-style:normal; color:#77767a; }
.s3p-list mark.s3p-hit{ background:none; color:#4b34d6; font-weight:700; }

@media (hover:hover){ .s3p-list li[role="option"]:hover{ background:#f7f5ff; } }
.s3p-list li[role="option"]:active{ background:#e9e5ff; }
/* The keyboard row is NOT the hover row: an inset accent ring clears 3:1 against both
   #fff and the tint, so two rows can never look equally active. */
.s3p-list li[role="option"].is-active{
  background:#f2f0ff; color:#4b34d6; box-shadow:inset 0 0 0 2px #6248ff;
}
.s3p-list li[role="option"].is-active small{ color:#6248ff; }
.s3p-list li[role="option"].is-current::after{
  content:""; position:absolute; right:14px; top:50%; margin-top:-4px;
  width:8px; height:8px; border-radius:50%; background:#0a7a45;
}
@media (forced-colors: active){
  .s3p-list li[role="option"].is-active{ outline:2px solid Highlight; outline-offset:-2px; }
  .s3p-bar:focus-within{ outline:2px solid Highlight; outline-offset:2px; }
}

.s3p-list li.is-cat{
  position:sticky; top:34px; z-index:1;      /* 34px = the count row's fixed height */
  padding:10px 13px 5px; background:#fff;
  font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; color:#a3a2a6; cursor:default;
}
.s3p-list .s3p-none{ padding:16px 13px; font-size:14px; line-height:1.5; color:#77767a; cursor:default; }
.s3p-list .s3p-none a{ color:#6248ff; text-decoration:underline; }

/* The results panel is sticky, so it outlives the chip on a long scroll — it has to say
   what it is pricing on its own. */
.s3p-for{ margin:0 0 10px; padding:0 2px; font-size:13px; line-height:1.45; color:#77767a; }
.s3p-for span{
  font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:10.5px;
  letter-spacing:.16em; text-transform:uppercase; color:#a3a2a6; margin-right:7px;
}
.s3p-for b{ font-weight:600; color:#161519; }

@media (prefers-reduced-motion: reduce){
  .s3p-bar, .s3p-bar-icon{ transition:none; }
}

@media (max-width:560px){
  .s3p-search{ margin:-20px -20px 0; padding:18px 20px 18px; border-radius:15px 15px 0 0; }
  .s3p-search-q{ font-size:17px; margin-bottom:10px; }
  .s3p-bar{ height:54px; border-radius:13px; }
  .s3p-bar-icon{ margin-left:14px; width:19px; height:19px; }
  .s3p-search input[type="search"]{ padding-left:10px; }
  .s3p-then{ margin:16px 0 14px; }
  .s3p-quick{
    flex-wrap:nowrap; min-width:0; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    /* the row runs past the edge, so fade it rather than guillotining a chip mid-word */
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
            mask-image:linear-gradient(90deg,#000 88%,transparent);
  }
  .s3p-pop{ top:calc(100% + 6px); border-radius:13px; }
  .s3p-pop.is-up{ bottom:calc(100% + 6px); }
  .s3p-list li[role="option"]{ padding-top:12px; padding-bottom:12px; }
  .s3p-cats{ padding:9px 11px 3px; }
}

/* the drawing question is four grades now, not a yes/no, so the segmented control stacks */
.s3p-seg--stack{ flex-direction:column; gap:7px; }
.s3p-seg--stack label{ flex:none; }
.s3p-seg--stack span{ text-align:left; padding:11px 13px; }

/* ─────────────────────────────────────────────────────────────────────────────
   The mapping levels, the bundle argument, the platform row and the ladder.
   Scoped under .s3x so none of it reaches the theme. This site is light-only,
   so there is one palette rather than two.
   ───────────────────────────────────────────────────────────────────────────── */
.s3x{ color:#161519; }
.s3x *{ box-sizing:border-box; }
.s3x-eyebrow{
  font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:#6248ff; margin:0 0 12px;
}
.s3x-h2{
  font-size:clamp(24px,3.2vw,34px); font-weight:600; letter-spacing:-.025em; line-height:1.12;
  margin:0 0 10px; color:#161519;
}
.s3x-lede{ font-size:16.5px; line-height:1.6; color:#494851; margin:0 0 24px; max-width:66ch; }
.s3x-note{ margin:14px 2px 0; font-size:13px; line-height:1.55; color:#77767a; }
.s3x-note a{ color:#6248ff; text-decoration:underline; }

/* the three levels */
.s3x-tiers{
  list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:1px;
  background:rgba(22,21,25,.10); border:1px solid rgba(22,21,25,.10);
  border-radius:18px; overflow:hidden;
}
.s3x-tiers li{
  background:#fff; padding:24px; display:flex; flex-direction:column; gap:6px;
  box-shadow:0 0 0 1px rgba(22,21,25,.10);
}
.s3x-tiers b{ font-size:18px; font-weight:600; letter-spacing:-.02em; color:#161519; }
.s3x-from{
  font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:20px; font-weight:700;
  letter-spacing:-.03em; color:#6248ff;
}
.s3x-tiers li > span:last-child{ font-size:14px; line-height:1.55; color:#77767a; margin-top:2px; }

/* why both */
.s3x-why{
  padding:30px 32px; border:1px solid rgba(22,21,25,.10); border-radius:20px;
  background:linear-gradient(180deg,rgba(98,72,255,.05),transparent 60%),#fff;
}
.s3x-why p{ font-size:15.5px; line-height:1.65; color:#494851; margin:0 0 14px; max-width:74ch; }
.s3x-why p:last-child{ margin-bottom:0; }
.s3x-why b{ color:#161519; font-weight:600; }
.s3x-whyfoot{
  padding-top:16px; border-top:1px solid rgba(22,21,25,.10);
  font-size:13.5px !important; color:#77767a !important;
}

/* the platform row */
.s3x-plat{ padding:24px 26px; border:1px solid rgba(22,21,25,.10); border-radius:18px; background:#fafaf8; }
.s3x-platlede{ font-size:14.5px; line-height:1.6; color:#494851; margin:0 0 18px; max-width:74ch; }
.s3x-platlede b{ color:#161519; font-weight:600; }
.s3x-platrow{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px; }
.s3x-plat1{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
  height:88px; padding:14px; border-radius:14px; text-decoration:none;
  border:1px solid rgba(22,21,25,.14); background:#fff; transition:border-color .12s, background .12s;
}
.s3x-plat1:hover{ border-color:#6248ff; background:#f7f5ff; }
.s3x-plat1 img{
  display:block !important; width:auto !important; max-width:118px !important;
  height:20px !important; object-fit:contain;
}
.s3x-plat1 em{ font-style:normal; font-size:12px; color:#77767a; }
.s3x-plat1.is-here{ border-color:#6248ff; background:#f2f0ff; }
.s3x-plat1.is-here em{ color:#6248ff; font-weight:600; }

/* the ladder */
.s3x-ladhead{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:0 0 16px; }
.s3x-lbl{
  font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#77767a;
  margin:0;
}
.s3x-select{
  height:46px; padding:0 40px 0 14px; font-family:inherit; font-size:15px; color:#161519;
  background:#fff; border:1px solid rgba(22,21,25,.16); border-radius:12px; cursor:pointer;
  -webkit-appearance:none; appearance:none; min-width:290px;
  background-image:linear-gradient(45deg,transparent 50%,#77767a 50%),linear-gradient(135deg,#77767a 50%,transparent 50%);
  background-position:calc(100% - 20px) 21px, calc(100% - 14px) 21px;
  background-size:6px 6px,6px 6px; background-repeat:no-repeat;
}
.s3x-select:focus{ outline:none; border-color:#6248ff; box-shadow:0 0 0 4px rgba(98,72,255,.14); }
.s3x-tw{
  overflow-x:auto; border:1px solid rgba(22,21,25,.10); border-radius:16px; background:#fff;
}
.s3x table{ border-collapse:collapse; width:100%; font-size:14.5px; min-width:600px; margin:0; }
.s3x th, .s3x td{
  text-align:left; padding:13px 16px; border-bottom:1px solid rgba(22,21,25,.07); vertical-align:baseline;
}
.s3x thead th{
  font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:10px; letter-spacing:.13em;
  text-transform:uppercase; color:#a3a2a6; font-weight:500; white-space:nowrap; background:#f5f6f4;
}
.s3x tbody tr:last-child td{ border-bottom:0; }
.s3x td.num, .s3x th.num{
  text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums;
  font-family:ui-monospace,"SF Mono",Menlo,monospace;
}
.s3x td.b{ font-family:ui-monospace,"SF Mono",Menlo,monospace; font-weight:700; color:#6248ff; }
.s3x .sm{ color:#a3a2a6; font-size:12.5px; }
@media (max-width:600px){
  .s3x-why, .s3x-plat{ padding:20px; }
  .s3x-tiers li{ padding:20px; }
}