/* Free-sample modal. Loaded non-blocking by partials/sample-modal, which keeps
   the button's own rules inline: the button is on the page before anything is
   clicked and must not flash unstyled while this arrives.

   Written by hand, not by Tailwind. redesign-v2.css is prebuilt, so a utility
   class invented for this would render as nothing at all. */
.smp-dlg{width:min(660px,calc(100vw - 28px));max-height:min(92vh,880px);padding:0;border:0;
  border-radius:16px;background:#fff;color:#0e2a4e;overflow:hidden;
  box-shadow:0 28px 80px -22px rgba(7,24,49,.6)}
.smp-dlg::backdrop{background:rgba(7,24,49,.62)}
.smp-dlg[open]{display:flex;flex-direction:column}
.smp-dlg [hidden]{display:none}
.smp-form{display:flex;flex-direction:column;min-height:0;flex:1}

.smp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:18px 22px 12px;border-bottom:1px solid #dbe7f3}
.smp-title{margin:0;font:700 20px/1.25 Twemoji Country Flags,Sora,Inter,system-ui,sans-serif;
  letter-spacing:-.02em;
  /* A technology name can be 72 characters with no spaces in it, and the
     longest one that has a sample is Japanese. Wrap anywhere rather than
     push the close button off the edge. */
  overflow-wrap:anywhere;min-width:0}
.smp-x{flex:none;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border:0;border-radius:8px;background:#f6fafe;color:#64789a;cursor:pointer}
.smp-x:hover{background:#e8f1fa;color:#0e2a4e}

.smp-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:14px 22px 6px}
/* Thin rather than absent: a scrollbar that is there when it is needed is
   less confusing than content that silently ends. */
.smp-body{scrollbar-width:thin;scrollbar-color:#c9dcee transparent}
.smp-body::-webkit-scrollbar{width:8px}
.smp-body::-webkit-scrollbar-thumb{background:#c9dcee;border-radius:4px}
.smp-sub{margin:0 0 12px;font:400 14px/1.5 Inter,system-ui,sans-serif;color:#64789a}
.smp-lbl{margin:0 0 7px;font:600 11px/1 Inter,system-ui,sans-serif;color:#64789a;
  text-transform:uppercase;letter-spacing:.07em}

.smp-stats{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px;padding:0;list-style:none}
.smp-stats li{padding:4px 10px;border-radius:999px;background:#eaf3fb;color:#25547f;
  font:600 12px/1.4 Inter,system-ui,sans-serif}

.smp-scroll{overflow-x:auto;border:1px solid #dbe7f3;border-radius:11px;background:#f6fafe}
.smp-tbl{width:100%;border-collapse:collapse;font:400 12px/1.4 Inter,system-ui,sans-serif;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.smp-tbl th{padding:6px 11px;text-align:left;color:#64789a;font-weight:600;font-size:10.5px;
  text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid #dbe7f3;background:#fff;
  /* Headings wrap; the rows above do not. TECHNOLOGIES TRACKED and PREMIUM
     TECHNOLOGIES are 168px each on one line and they set the width of the
     whole table, so 240px of it used to sit off the side of a phone and 10px
     off the side of a laptop. Wrapping costs one line of header height on a
     phone, nothing on a desktop, and takes the overflow to 126 and 0.

     Wrapped, not shortened. The disclosure directly above lists every column
     under the name the file gives it, and a table calling the same field
     something else fifty pixels below that is a table nobody can check the
     file against. */
  white-space:normal}
.smp-tbl td{padding:5.5px 11px;border-bottom:1px solid #e9f1f9;color:#0e2a4e;
  /* 140px, not more. A company name is the one value here with no ceiling on
     it, and the room it takes is the room the last column does not get; a
     Japanese page with a long company name was the case that pushed it over.
     Still capped now the headings wrap: wrapping frees the header from
     setting the column width, which leaves the data setting it instead. */
  max-width:140px;overflow:hidden;text-overflow:ellipsis}
.smp-tbl tr:last-child td{border-bottom:0}
/* The trailing "+13 more columns" marker. Its cells are empty on purpose, so
   it is set apart from the four real ones: the note under the column list
   already says not every column is filled for every website, and an empty
   column that looks like the others invites exactly that reading. Muted and
   behind a rule, it reads as the file carrying on. */
.smp-tbl .smp-more{border-left:1px solid #dbe7f3;background:#f6fafe;color:#93a9c4}

/* Closed by default. Seventeen column names answer the question completely
   and are also the tallest block in the modal, so they wait to be asked for. */
.smp-cols{margin:0 0 12px}
.smp-preview{margin:0}
.smp-preview>summary{margin-bottom:8px}
/* Long labels wrap rather than stretch the modal. */
.smp-consent span{overflow-wrap:anywhere}
.smp-cols>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;
  font:600 11px/1 Inter,system-ui,sans-serif;color:#2563eb;
  text-transform:uppercase;letter-spacing:.07em}
.smp-cols>summary::-webkit-details-marker{display:none}
.smp-cols>summary::before{content:"";width:0;height:0;flex:none;
  border:4px solid transparent;border-left-color:currentColor;
  transition:transform .15s ease;transform-origin:2px 50%}
.smp-cols[open]>summary::before{transform:rotate(90deg)}
.smp-cols>summary:hover{color:#0e2a4e}

.smp-chips{display:flex;flex-wrap:wrap;gap:5px;margin:10px 0 6px;padding:0;list-style:none}
.smp-chips li{padding:3px 8px;border:1px solid #dbe7f3;border-radius:6px;background:#f6fafe;
  font:500 11.5px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:#3d5e87}
.smp-note{margin:0;font:400 11.5px/1.5 Inter,system-ui,sans-serif;color:#8fa3bf}

.smp-foot{flex:none;padding:14px 22px 16px;border-top:1px solid #dbe7f3;background:#f6fafe}
/* Side by side once there is room for two usable inputs, stacked below it.
   480px rather than the 560px the preview table uses: two 15px inputs need
   far less width than seventeen columns do. */
.smp-fields{display:grid;gap:10px}
/* Side by side only once both labels fit on one line, which is a question
   about the longest translation and not about phones. Measured: the Russian
   email label sets it at 276px a column, and a column is half of the dialog
   less its padding and the gap, so the two-up starts at 636px of viewport.
   660 is that with a little slack. Below it they stack, which costs one row
   of height and is never wrong.

   align-items:end is the belt to that pair of braces. Nine locales is nine
   chances that a label I measured today gets reworded tomorrow, and bottom
   alignment keeps both inputs on one line when one of them wraps anyway. */
@media (min-width:660px){.smp-fields{grid-template-columns:1fr 1fr;gap:12px;align-items:end}}
.smp-field{display:block;min-width:0}
.smp-field input{display:block;width:100%;margin-top:6px;padding:11px 13px;border:1px solid #c9dcee;
  border-radius:10px;background:#fff;color:#0e2a4e;
  font:400 15px/1.3 Inter,system-ui,sans-serif}
.smp-field input:focus{outline:2px solid #2563eb;outline-offset:-1px;border-color:#2563eb}
.smp-field input[aria-invalid=true]{border-color:#dc2626}

.smp-err{margin:8px 0 0;font:500 13px/1.45 Inter,system-ui,sans-serif;color:#b91c1c}
.smp-consent{display:flex;align-items:flex-start;gap:8px;margin-top:10px;cursor:pointer;
  font:400 12.5px/1.45 Inter,system-ui,sans-serif;color:#3d5e87}
.smp-consent input{flex:none;margin-top:2px;width:15px;height:15px;accent-color:#2563eb}

.smp-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.smp-submit{display:block;width:100%;margin-top:12px;padding:.85rem 1.5rem;border:0;border-radius:.75rem;
  background:#f59e0b;color:#071831;cursor:pointer;
  font:600 15px/1 Twemoji Country Flags,Sora,Inter,system-ui,sans-serif;
  box-shadow:0 10px 30px -8px rgba(245,158,11,.55);transition:filter .18s ease}
.smp-submit:hover{filter:brightness(1.06)}
.smp-submit[disabled]{opacity:.6;cursor:progress;box-shadow:none}
/* The small print and reCAPTCHA's required disclaimer share one block. The
   disclaimer comes from partials/recaptcha-v3 with its own utility classes,
   so it is sized here rather than there: every other form on the site wants
   it at its own size. */
.smp-legal{margin-top:10px;text-align:center}
.smp-legal p{margin:0;font:400 11px/1.45 Inter,system-ui,sans-serif;color:#8fa3bf}
.smp-legal p+p{margin-top:4px}
.smp-fine{margin:0}

.smp-done{padding:44px 30px 34px;text-align:center;color:#0e2a4e}
.smp-done svg{color:#16a34a}
.smp-done .smp-title{margin:14px 0 8px}
.smp-done .smp-sub{margin:0 auto 10px;max-width:34em}
.smp-done .smp-spam{margin:0 auto 22px;max-width:34em}
.smp-done .smp-submit{max-width:220px;margin-left:auto;margin-right:auto}

@media (max-width:560px){
  /* A sheet off the bottom, not a full screen. Filling the screen left the
     body stretched and a void between the table and the form; sized to its
     content there is none, and the button lands under the thumb. */
  /* inset rather than margin:auto. A modal dialog is positioned by the UA
     and margin-top:auto did not move it off the top. */
  .smp-dlg{position:fixed;inset:auto 0 0 0;width:100vw;max-width:100vw;
    max-height:92vh;height:auto;margin:0;border-radius:16px 16px 0 0}
  .smp-body{flex:0 1 auto}
  .smp-head,.smp-body,.smp-foot{padding-left:16px;padding-right:16px}
  .smp-tbl td{max-width:120px}
}
@media (prefers-reduced-motion:reduce){.smp-btn,.smp-submit,.smp-x{transition:none}}