/* Trust sections: security walls (#security) and the competitor comparison (#why).
   Every selector is scoped to .security or .why so short class names cannot leak. */

/* =========================================================
   SECURITY: a dark rounded frame, six walls laid like bricks
   ========================================================= */
.security {
  position: relative;
  padding: clamp(28px, 5vw, 72px) var(--gutter);
}
.security .sec-frame {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: 1376px;
  margin-inline: auto;
  padding: clamp(48px, 5.6vw, 84px) clamp(20px, 5vw, 80px) clamp(36px, 4vw, 60px);
  border-radius: var(--radius-lg);
  background: var(--ink);
  color: var(--paper);
}
/* faint blueprint grid, fading out toward the bottom */
.security .sec-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 253, 246, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 253, 246, .05) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(120% 85% at 30% 0%, #000 25%, transparent 80%);
  mask-image: radial-gradient(120% 85% at 30% 0%, #000 25%, transparent 80%);
}
/* warm glow in the top right corner */
.security .sec-frame::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -300px;
  right: -200px;
  width: 680px;
  height: 680px;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 201, 49, .2), rgba(255, 201, 49, 0));
}
.security :focus-visible { outline-color: var(--sun); }

.security .sec-head { max-width: 780px; margin-bottom: clamp(32px, 3.8vw, 52px); }
.security .kicker { color: rgba(255, 253, 246, .66); }
.security h2 { margin-top: 18px; color: var(--paper); }
.security .sec-accent { color: var(--sun); }
.security .sec-sub {
  margin-top: 20px;
  max-width: 36em;
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: rgba(255, 253, 246, .76);
}

/* The six walls */
.security .walls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.security .wall {
  position: relative;
  padding: 26px 26px 30px;
  border-radius: 20px;
  border: 1px solid rgba(255, 253, 246, .11);
  background: linear-gradient(180deg, rgba(255, 253, 246, .065), rgba(255, 253, 246, .02));
  /* keeps the shared .rv rise (opacity, transform) and adds the hover border */
  transition:
    opacity .8s var(--ease) var(--rv-delay, 0s),
    transform .9s var(--ease) var(--rv-delay, 0s),
    border-color .3s;
}
/* a sunshine cap along the top of each wall; it draws in as the wall rises */
.security .wall::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 24px;
  right: 24px;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: var(--sun);
  transform-origin: left center;
}
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .security .wall::before {
    transform: scaleX(0);
    transition: transform .9s var(--ease) calc(var(--rv-delay, 0s) + .3s);
  }
  .security .wall.in::before { transform: none; }
}
.security .wall:hover { border-color: rgba(255, 201, 49, .45); }

.security .w-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.security .w-ico {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 14px;
  background: var(--sun);
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 12px 26px -14px rgba(255, 201, 49, .85);
}
.security .w-num {
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: .14em;
  color: rgba(255, 253, 246, .5);
}
.security .wall h3 { color: var(--paper); font-size: clamp(20px, 1.6vw, 24px); }
.security .wall p {
  margin-top: 10px;
  font-size: 15.5px;
  line-height: 1.55;
  color: rgba(255, 253, 246, .74);
}

/* Honest line and the link to /security/ */
.security .sec-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 48px;
  margin-top: clamp(32px, 3.4vw, 44px);
  padding-top: clamp(24px, 2.6vw, 32px);
  border-top: 1px solid rgba(255, 253, 246, .12);
}
.security .sec-honest {
  flex: 1 1 420px;
  max-width: 32em;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(20px, 1.9vw, 27px);
  line-height: 1.28;
  letter-spacing: -.02em;
  font-variation-settings: "opsz" 96;
  color: var(--paper);
}
.security .sec-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  height: 54px;
  padding: 0 8px 0 24px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 253, 246, .3);
  color: var(--paper);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .2s, background-color .2s;
}
.security .sec-link .ico {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--sun);
  color: var(--ink);
  transition: transform .35s var(--ease);
}
.security .sec-link:hover { border-color: var(--paper); background: rgba(255, 253, 246, .07); }
.security .sec-link:hover .ico { transform: translateX(3px); }

/* =========================================================
   WHY: verdict, comparison table, who picks which, free callout
   ========================================================= */
.why { padding-block: var(--section-y); }
.why .why-head { max-width: 880px; margin-bottom: clamp(36px, 4.5vw, 56px); }
.why h2 { margin-top: 18px; }
.why .why-accent { color: var(--cobalt); }
.why .why-verdict {
  margin-top: 20px;
  max-width: 40em;
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: var(--ink-2);
}
.why .why-verdict strong { color: var(--ink); font-weight: 600; }

/* Footnote markers, shared by the table and the callout */
.why sup.fn { font-size: .66em; line-height: 0; vertical-align: super; margin-left: 1px; }
.why .fn a {
  padding: 0 2px;
  border-radius: 4px;
  color: var(--cobalt);
  font-weight: 600;
  text-decoration: none;
}
.why .fn a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* The table scrolls inside its own box on phones, never the page (see the 767px rule
   for the sticky labels and the edge shadow). From 768px up, 700px always fits, even with a scrollbar. */
.why .cmp-wrap { position: relative; }
.why .cmp-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  border-radius: var(--radius-md);
}
.why .cmp-scroll:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 4px; }
.why .cmp {
  width: 100%;
  min-width: 700px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 15px;
  line-height: 1.45;
}
.why .cmp col.c-q { width: 17%; }
.why .cmp col.c-us { width: 24%; }
.why .cmp th,
.why .cmp td {
  padding: 18px 20px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.why .cmp thead th {
  padding-top: 22px;
  padding-bottom: 18px;
  vertical-align: bottom;
  border-bottom: 1.5px solid var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(18px, 1.5vw, 22px);
  letter-spacing: -.02em;
  font-variation-settings: "opsz" 96;
  color: var(--ink);
}
.why .cmp tbody th {
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--ink);
}
.why .cmp td { color: var(--ink-2); }
/* Vidd AI column, tinted sunshine from top to bottom */
.why .cmp .us {
  background: rgba(255, 201, 49, .2);
  border-bottom-color: rgba(20, 18, 14, .08);
  color: var(--ink);
  font-weight: 500;
}
.why .cmp thead .us {
  background: var(--sun);
  border-bottom-color: var(--sun);
  border-radius: 18px 18px 0 0;
}
.why .cmp tbody tr:last-child th,
.why .cmp tbody tr:last-child td { border-bottom: 0; }
.why .cmp tbody tr:last-child .us { border-radius: 0 0 18px 18px; }
.why .cmp .us strong { font-weight: 700; }
.why .cmp-hint { display: none; }

/* Who should pick which */
.why .picks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 16px;
  margin-top: clamp(40px, 5vw, 64px);
}
.why .pick {
  padding: clamp(24px, 3vw, 38px);
  border-radius: var(--radius-md);
}
.why .pick h3 { font-size: var(--fs-h3); }
.why .pick p {
  margin-top: 12px;
  max-width: 30em;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.why .pick-them { background: var(--paper-2); }
.why .pick-us {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: #fff;
  border: 2px solid var(--cobalt);
  box-shadow: var(--shadow-card);
}
.why .pick-us .btn { margin-top: 24px; }
.why .pick-us .btn .ico { width: 30px; height: 30px; margin-right: -14px; }

/* Keep your ChatGPT */
.why .keep {
  max-width: 32em;
  margin: clamp(44px, 5.5vw, 72px) auto 0;
  text-align: center;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.3;
  letter-spacing: -.02em;
  font-variation-settings: "opsz" 96;
  color: var(--ink-2);
  text-wrap: balance;
}
.why .keep strong { color: var(--ink); font-weight: 700; }

/* There's no such thing as free */
.why .free {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: clamp(44px, 5.5vw, 72px);
  padding: clamp(32px, 4.5vw, 64px) clamp(24px, 5vw, 72px);
  border-radius: var(--radius-lg);
  background: var(--sun);
  color: var(--ink);
}
.why .free h3 {
  max-width: 13em;
  font-weight: 800;
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: 1.02;
  letter-spacing: -.035em;
}
.why .free p {
  margin-top: 18px;
  max-width: 40em;
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: var(--ink);
}
.why .free p strong { font-weight: 600; }
.why .free .fn a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.why .free-tag {
  position: absolute;
  z-index: -1;
  top: 50%;
  right: clamp(-10px, 3vw, 64px);
  width: clamp(130px, 17vw, 230px);
  height: auto;
  color: rgba(20, 18, 14, .14);
  transform: translateY(-50%) rotate(-14deg);
}

/* Sources */
.why .src-block {
  margin-top: clamp(36px, 4vw, 52px);
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.why .src-title {
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--stone);
}
.why .sources {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding-left: 1.5em;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--stone);
}
.why .sources li { padding: 2px 6px; margin-left: -6px; border-radius: 8px; scroll-margin-top: calc(var(--nav-h) + 24px); transition: background-color .4s; }
.why .sources li::marker { font-family: var(--mono); color: var(--ink-2); }
.why .sources li:target { background: rgba(255, 201, 49, .32); }
.why .sources b { color: var(--ink-2); font-weight: 600; }
.why .sources a {
  color: var(--ink-2);
  text-decoration-color: rgba(20, 18, 14, .3);
  text-underline-offset: 3px;
}
.why .sources a:hover { color: var(--cobalt); text-decoration-color: currentColor; }
.why .tm { margin-top: 14px; font-size: 12.5px; color: var(--stone); }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 980px) {
  .security .walls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  /* The table is wider than the screen here and scrolls sideways inside its own box.
     The right edge shadow says there is more; the paper cover hides it at the end of the scroll. */
  .why .cmp-scroll {
    background:
      linear-gradient(to left, var(--paper) 40%, rgba(255, 253, 246, 0)) right center / 56px 100% no-repeat local,
      radial-gradient(farthest-side at 100% 50%, rgba(20, 18, 14, .16), rgba(20, 18, 14, 0)) right center / 16px 100% no-repeat scroll;
  }
  /* row labels stay put while the columns scroll */
  .why .cmp th.q,
  .why .cmp tbody th {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--paper);
    box-shadow: 1px 0 0 var(--line);
  }
  .why .cmp-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-family: var(--mono);
    font-weight: 500;
    font-size: var(--fs-label);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--stone);
  }

  .security { padding: 16px var(--gutter) 24px; }
  .security .sec-frame { padding: 48px 20px 32px; border-radius: 26px; }
  .security .sec-frame::before { background-size: 36px 36px; }
  .security .walls { grid-template-columns: 1fr; gap: 10px; }
  /* phones: icon on the left, words on the right, so six walls stay short */
  .security .wall {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 16px;
    padding: 20px 18px 22px;
    border-radius: 18px;
  }
  .security .wall::before { left: 18px; right: 18px; }
  .security .w-top { grid-row: 1 / span 2; margin: 0; align-self: start; }
  .security .w-ico { width: 44px; height: 44px; border-radius: 13px; }
  .security .w-num { display: none; }
  .security .wall h3 { font-size: 19px; align-self: center; }
  .security .wall p { margin-top: 6px; font-size: 15px; }
  .security .sec-foot { flex-direction: column; align-items: flex-start; }
  .security .sec-honest { flex: none; }
  .security .sec-link { height: 50px; font-size: 15.5px; }

  /* fixed column widths: labels and the Vidd AI column fill the first screen, a slice of ChatGPT peeks in */
  .why .cmp { width: 764px; min-width: 0; font-size: 14.5px; }
  .why .cmp col.c-q { width: 108px; }
  .why .cmp col.c-us { width: 176px; }
  .why .cmp col:not(.c-q):not(.c-us) { width: 160px; }
  .why .cmp th,
  .why .cmp td { padding: 14px 14px; }
  .why .cmp tbody th { padding-left: 2px; font-size: 13.5px; }
  .why .picks { grid-template-columns: 1fr; gap: 12px; }
  .why .pick p { font-size: 16px; }
  .why .free { border-radius: 26px; }
  .why .free-tag { top: 12px; right: -42px; width: 112px; transform: rotate(-14deg); }
  .why .free h3 { max-width: 10em; }
  .why .free p { font-size: 16.5px; }
}
@media (max-width: 360px) {
  .security .sec-link { gap: 8px; padding: 0 6px 0 16px; font-size: 14.5px; }
  .security .sec-link .ico { width: 32px; height: 32px; }
}