/* Moved out of this widget's inline <style> so it is served as a cacheable file. */
:root {
	/* tokens now in the uBind Design Tokens plugin */
}



    html {
      scroll-behavior: smooth;
      -webkit-font-smoothing: antialiased;
    }

    





    button {
      font: inherit;
      cursor: pointer;
      border: none;
      background: none;
      color: inherit;
    }

    





    



    @keyframes pulse {

      0%,
      100% {
        box-shadow: 0 0 0 4px rgba(31, 166, 122, .18);
      }

      50% {
        box-shadow: 0 0 0 9px rgba(31, 166, 122, .04);
      }
    }



    

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 14px 22px;
      border-radius: 999px;
      font-weight: 500;
      font-size: 15px;
      letter-spacing: -0.005em;
      transition: transform .25s var(--ease-out), box-shadow .25s, background .2s, color .2s;
      white-space: nowrap;
    }

    

    .btn-primary:hover {
      background: var(--emerald-600);
      transform: translateY(-2px);
      color: white !important;
      box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 18px 40px -10px rgba(31, 166, 122, .6);
    }

    

    .btn-ghost:hover {
      background: rgba(255, 255, 255, .12) !important;
      transform: translateY(-2px);
      color: white !important;
    }









    /* NAV */
    .nav-wrap {
      position: fixed;
      top: 18px;
      left: 0;
      right: 0;
      z-index: 100;
      display: flex;
      justify-content: center;
      pointer-events: none;
    }





    .nav-logo {
      display: flex;
      align-items: center;
      gap: 10px;
      color: white;
      font-weight: 600;
      font-size: 17px;
      letter-spacing: -0.02em;
      padding-right: 6px;
    }

    .nav-logo .logo-mark {
      width: 28px;
      height: 28px;
    }











    /* HERO */
    .hero {
      position: relative;
      background: var(--ink-1000);
      color: white;
      overflow: hidden;
      isolation: isolate;
      min-height: 90vh;
      display: flex;
      align-items: center;
    }





    





    

    





    .hero-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 80px;
      align-items: center;
    }

    @media (max-width: 1100px) {
      .hero-grid {
        grid-template-columns: 1fr;
        gap: 60px;
      }
    }
    .hero-eyebrow {
      color: var(--emerald-300);
      margin-bottom: 28px;
    }



    .hero h1 {
      font-size: clamp(42px, 5.8vw, 84px);
      margin-bottom: 28px;
    }

    /* The heading gradient belongs on the static words, never on the <h1> itself.
       background-clip:text pulls the glyphs of transformed and out-of-flow descendants
       into the clip at the CLIPPING element's origin, so with this on the <h1> the
       rotating word was painted a second time over the heading's first line. */
    .hero h1 .h1-ink {
      background: linear-gradient(180deg, #fff 0%, #b8d8ce 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .word-swap {
      display: inline-block;
      position: relative;
      min-width: 6ch;
      vertical-align: baseline;
      perspective: 600px;
    }

    .word-swap .word {
      display: inline-block;
      font-family: var(--font-display);
      font-style: italic;
      font-weight: 300;
      background: linear-gradient(135deg, var(--emerald-300), var(--emerald-500));
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      position: absolute;
      left: 0;
      top: 0;
      white-space: nowrap;
      opacity: 0;
      transform: translateY(20px) rotateX(-30deg);
      transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
    }

    .word-swap .word.active {
      opacity: 1;
      transform: translateY(0) rotateX(0);
      position: relative;
    }

    .word-swap .word.exiting {
      opacity: 0;
      transform: translateY(-20px) rotateX(30deg);
      position: absolute;
    }

    .hero-sub {
      font-size: 19px;
      line-height: 1.55;
      color: rgba(255, 255, 255, .7);
      max-width: 540px;
      margin-bottom: 40px;
    }

    .hero-ctas {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 48px;
    }


    /* Hero stage - Shield radar */
    .shield-stage {
      position: relative;
      height: 560px;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      animation: fadeUp 1.2s .4s var(--ease-out) forwards;
    }

    .shield-stage::before {
      content: '';
      position: absolute;
      inset: -40px;
      background: radial-gradient(50% 50% at 50% 50%, rgba(31, 166, 122, .3) 0%, transparent 70%);
      filter: blur(40px);
      z-index: -1;
    }

    .radar-svg {
      width: 100%;
      max-width: 500px;
      overflow: visible;
    }

    .radar-ring {
      fill: none;
      stroke: rgba(31, 166, 122, .3);
      stroke-width: 1;
      transform-origin: center;
    }

    .radar-ring.r1 {
      animation: radar-pulse 4s ease-out infinite;
    }

    .radar-ring.r2 {
      animation: radar-pulse 4s ease-out infinite;
      animation-delay: 1s;
    }

    .radar-ring.r3 {
      animation: radar-pulse 4s ease-out infinite;
      animation-delay: 2s;
    }

    .radar-ring.r4 {
      animation: radar-pulse 4s ease-out infinite;
      animation-delay: 3s;
    }

    @keyframes radar-pulse {
      0% {
        transform: scale(0.3);
        opacity: 1;
        stroke-width: 2;
      }

      100% {
        transform: scale(1.3);
        opacity: 0;
        stroke-width: 0.5;
      }
    }

    .shield-core {
      filter: drop-shadow(0 0 30px rgba(31, 166, 122, .6));
    }

    .radar-sweep {
      transform-origin: 250px 250px;
      animation: radar-spin 6s linear infinite;
    }

    @keyframes radar-spin {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    .threat-blip {
      fill: var(--coral);
      filter: drop-shadow(0 0 6px var(--coral));
      opacity: 0;
      animation: blip-appear 4s ease-in-out infinite;
    }

    .threat-blip.t1 {
      animation-delay: 1s;
    }

    .threat-blip.t2 {
      animation-delay: 2.5s;
    }

    .threat-blip.t3 {
      animation-delay: 3.2s;
    }

    @keyframes blip-appear {

      0%,
      100% {
        opacity: 0;
      }

      20% {
        opacity: 1;
      }

      50% {
        opacity: 0;
      }
    }

    .shield-floater {
      position: absolute;
      background: rgba(15, 28, 23, .85);
      backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: var(--r-md);
      padding: 14px 16px;
      font-size: 13px;
      box-shadow: 0 20px 40px -10px rgba(0, 0, 0, .5);
    }

    .shield-floater .lbl {
      font-family: var(--mono);
      font-size: 10px;
      color: var(--emerald-400);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      margin-bottom: 6px;
    }

    .shield-floater.f1 {
      top: 40px;
      right: 0;
      animation: floater-1 6s ease-in-out infinite alternate;
    }

    .shield-floater.f2 {
      bottom: 60px;
      left: 0;
      animation: floater-2 7s ease-in-out infinite alternate;
    }

    @keyframes floater-1 {
      0% {
        transform: translateY(0);
      }

      100% {
        transform: translateY(-10px);
      }
    }

    @keyframes floater-2 {
      0% {
        transform: translateY(0);
      }

      100% {
        transform: translateY(-8px);
      }
    }

    .shield-floater .row-live {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--emerald-300);
      font-family: var(--mono);
      font-size: 11px;
    }

    .shield-floater .live-dot {
      width: 6px;
      height: 6px;
      background: var(--emerald-400);
      border-radius: 50%;
      animation: blink 1.5s ease-in-out infinite;
    }

    @keyframes blink {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: .3;
      }
    }

    .shield-floater .val {
      font-family: var(--font-display);
      font-size: 20px;
      color: white;
      font-weight: 400;
    }

    @media (max-width: 1100px) {
      .shield-stage {
        height: 500px;
        max-width: 500px;
        margin: 0 auto;
      }
    }

    @media (max-width: 600px) {
      .shield-stage {
        height: 400px;
      }

      .shield-floater {
        padding: 10px 12px;
        font-size: 12px;
      }
    }

    /* SECTION BASE */
    section.block {
      position: relative;
    }


    .section-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 48px;
      margin-bottom: 72px;
    }

    



    .section-head p {
      color: var(--ink-500);
      font-size: 17px;
      max-width: 500px;
      margin-top: 18px;
      line-height: 1.55;
    }

    @media (max-width: 768px) {
      .section-head {
        flex-direction: column;
        align-items: flex-start;
      }
    }

    



    



    

    

    

    

    



    /* WORKFLOW - Response process */
    /* Seam: the hero above ends on --ink-1000 too. */
    .response-flow {
      background: var(--ink-1000);
      border-top: var(--ub-seam-dark);
      color: white;
      overflow: hidden;
    }

    .response-flow .section-head h2 {
      color: white;
    }

    .response-flow .section-head p {
      color: rgba(255, 255, 255, .6);
    }

    .response-flow .eyebrow {
      color: var(--emerald-400);
    }

    .flow-canvas {
      position: relative;
      background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .01));
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: var(--r-xl);
      padding: 60px 40px;
      overflow: hidden;
      box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .4);
    }

    .flow-canvas::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(60% 50% at 50% 0%, rgba(31, 166, 122, .15) 0%, transparent 70%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .02) 0 1px, transparent 1px 40px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .02) 0 1px, transparent 1px 40px);
      pointer-events: none;
    }

    .flow-canvas>* {
      position: relative;
      z-index: 1;
    }

    .flow-stages {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 16px;
      position: relative;
    }

    .flow-stages::before {
      content: '';
      position: absolute;
      top: 42px;
      left: 60px;
      right: 60px;
      height: 2px;
      background: linear-gradient(90deg, transparent, rgba(31, 166, 122, .4), rgba(31, 166, 122, .6), rgba(31, 166, 122, .4), transparent);
      z-index: 0;
    }

    .flow-stages::after {
      content: '';
      position: absolute;
      top: 42px;
      left: 60px;
      height: 2px;
      width: 0;
      background: linear-gradient(90deg, var(--emerald-500), var(--emerald-300));
      filter: drop-shadow(0 0 8px var(--emerald-400));
      z-index: 1;
      animation: flow-progress 8s var(--ease-out) infinite;
    }

    @keyframes flow-progress {
      0% {
        width: 0;
      }

      90% {
        width: calc(100% - 120px);
      }

      100% {
        width: calc(100% - 120px);
        opacity: 0;
      }
    }

    .flow-stage {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .flow-stage .num {
      font-family: var(--mono);
      font-size: 10px;
      color: var(--emerald-400);
      letter-spacing: 0.12em;
      text-transform: uppercase;
      margin-bottom: 12px;
    }

    .flow-stage .node {
      position: relative;
      width: 60px;
      height: 60px;
      background: linear-gradient(135deg, var(--emerald-800), var(--emerald-950));
      border: 1px solid rgba(31, 166, 122, .4);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--emerald-300);
      z-index: 2;
      transition: all .3s;
    }

    .flow-stage .node svg {
      width: 24px;
      height: 24px;
    }

    .flow-stage.pulsing .node {
      background: linear-gradient(135deg, var(--emerald-500), var(--emerald-700));
      color: white;
      box-shadow: 0 0 0 4px rgba(31, 166, 122, .2), 0 0 30px rgba(31, 166, 122, .5);
    }

    .flow-stage .node::after {
      content: '';
      position: absolute;
      inset: -8px;
      border: 2px solid var(--emerald-400);
      border-radius: 50%;
      opacity: 0;
      pointer-events: none;
    }

    .flow-stage.pulsing .node::after {
      animation: pulse-ring 1.4s ease-out infinite;
    }

    @keyframes pulse-ring {
      0% {
        opacity: .8;
        transform: scale(1);
      }

      100% {
        opacity: 0;
        transform: scale(1.6);
      }
    }

    .flow-stage h3 {
      font-family: var(--font-display);
      font-size: 17px;
      font-weight: 500;
      color: white;
      margin: 20px 0 6px;
      letter-spacing: -0.01em;
    }

    .flow-stage p {
      color: rgba(255, 255, 255, .55);
      font-size: 12.5px;
      line-height: 1.5;
      max-width: 160px;
    }

    .flow-stage .sla {
      display: inline-block;
      margin-top: 10px;
      padding: 4px 10px;
      border-radius: 999px;
      background: rgba(31, 166, 122, .1);
      border: 1px solid rgba(31, 166, 122, .3);
      color: var(--emerald-300);
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.08em;
    }

    @media (max-width: 900px) {
      .flow-stages {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 32px 16px;
      }

      .flow-stages::before,
      .flow-stages::after {
        display: none;
      }
    }

    @media (max-width: 540px) {
      .flow-stages {
        grid-template-columns: 1fr 1fr;
      }

      .flow-canvas {
        padding: 40px 24px;
      }
    }

    /* SEVERITY MATRIX */
    .severity-matrix {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: 16px;
      margin-top: 60px;
    }

    .sev-card {
      background: rgba(255, 255, 255, .02);
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: var(--r-md);
      padding: 20px;
      position: relative;
      overflow: hidden;
    }

    .sev-card .sev-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      margin-bottom: 14px;
      box-shadow: 0 0 0 4px currentColor;
      opacity: 1;
    }

    .sev-card.crit {
      --sev: var(--crit);
    }

    .sev-card.high {
      --sev: var(--high);
    }

    .sev-card.med {
      --sev: var(--med);
    }

    .sev-card.low {
      --sev: var(--low);
    }

    .sev-card .sev-dot {
      background: var(--sev);
      color: color-mix(in srgb, var(--sev) 20%, transparent);
      animation: pulse-sev 2.4s ease-in-out infinite;
    }

    @keyframes pulse-sev {

      0%,
      100% {
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--sev) 25%, transparent);
      }

      50% {
        box-shadow: 0 0 0 8px color-mix(in srgb, var(--sev) 5%, transparent);
      }
    }

    .sev-card .name {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--sev);
      font-weight: 500;
      margin-bottom: 8px;
    }

    .sev-card h4 {
      font-family: var(--font-display);
      font-size: 20px;
      color: white;
      font-weight: 400;
      letter-spacing: -0.01em;
      margin-bottom: 8px;
    }

    .sev-card p {
      color: rgba(255, 255, 255, .5);
      font-size: 12.5px;
      line-height: 1.5;
      margin-bottom: 12px;
    }

    @media (max-width: 900px) {
      .severity-matrix {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width: 480px) {
      .severity-matrix {
        grid-template-columns: 1fr;
      }
    }

    /* REPORT FORM */
    .report-section {
      background: var(--paper);
      position: relative;
    }

    .report-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 44px;
      align-items: start;
    }

    .report-info {
      max-width: 880px;
      margin: 0 auto;
      text-align: center;
    }

    .report-info h2 {
      font-size: clamp(36px, 4.5vw, 56px);
      margin-bottom: 24px;
      max-width: 760px;
      margin-inline: auto;
    }

    .report-info>p {
      color: var(--ink-500);
      font-size: 17px;
      margin-bottom: 36px;
      max-width: 700px;
      margin-inline: auto;
    }

    .report-checks {
      list-style: none;
      margin-bottom: 0;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0 36px;
      max-width: 880px;
      margin-inline: auto;
      text-align: left;
    }

    @media (max-width: 760px) {
      .report-checks {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    .report-checks li {
      display: flex;
      gap: 12px;
      padding: 14px 0;
      border-bottom: 1px solid var(--ink-100);
      font-size: 15px;
      color: var(--ink-700);
    }

    .report-checks li:last-child {
      border-bottom: none;
    }

    .report-checks .icn {
      color: var(--emerald-500);
      flex-shrink: 0;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: rgba(31, 166, 122, .1);
      border: 1px solid rgba(31, 166, 122, .3);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* FORM CARD */
    .report-form-card {
      max-width: 880px;
      width: 100%;
      margin: 0 auto;
      background: white;
      border: 1px solid var(--ink-100);
      border-radius: var(--r-xl);
      padding: 40px;
      box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .1);
    }

    @media (max-width: 600px) {
      .report-form-card {
        padding: 28px;
      }
    }

    

    .progress-pill {
      flex: 1;
      height: 4px;
      background: var(--ink-100);
      border-radius: 2px;
      overflow: hidden;
    }

    .progress-pill>span {
      display: block;
      height: 100%;
      background: linear-gradient(90deg, var(--emerald-500), var(--emerald-400));
      width: 0;
      border-radius: 2px;
      transition: width .5s var(--ease-out);
    }

    .form-step-indicator {
      font-family: var(--mono);
      font-size: 12px;
      color: var(--ink-400);
      margin-bottom: 12px;
      letter-spacing: 0.06em;
    }

    .form-title {
      font-family: var(--font-display);
      font-size: 28px;
      font-weight: 400;
      line-height: 1.15;
      letter-spacing: -0.015em;
      color: var(--ink-1000);
      margin-bottom: 8px;
    }

    .form-sub {
      color: var(--ink-500);
      font-size: 14.5px;
      margin-bottom: 26px;
    }

    

    

    @keyframes stepIn {
      from {
        opacity: 0;
        transform: translateX(20px);
      }

      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    



    .opt-card {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 16px;
      background: var(--ink-50);
      border: 1px solid var(--ink-100);
      border-radius: var(--r-md);
      transition: border-color .2s, background .2s, transform .15s;
      text-align: left;
      width: 100%;
    }

    .opt-card:hover {
      border-color: var(--emerald-400);
      background: var(--emerald-50);
      transform: translateY(-2px);
    }

    .opt-card.selected {
      border-color: var(--emerald-500);
      background: var(--emerald-50);
      box-shadow: 0 0 0 1px var(--emerald-500);
    }

    .opt-icn {
      flex-shrink: 0;
      width: 38px;
      height: 38px;
      border-radius: 10px;
      background: white;
      border: 1px solid var(--ink-100);
      color: var(--emerald-600);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .opt-card.selected .opt-icn {
      background: var(--emerald-500);
      color: white;
      border-color: var(--emerald-500);
    }

    

    .opt-text .t {
      display: block;
      color: var(--ink-1000);
      font-size: 14px;
      font-weight: 500;
      margin-bottom: 4px;
    }

    .opt-text .d {
      display: block;
      color: var(--ink-500);
      font-size: 12.5px;
      line-height: 1.4;
    }

    .sev-pick {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 24px;
    }

    .sev-pick-card {
      padding: 14px 16px;
      background: var(--ink-50);
      border: 1px solid var(--ink-100);
      border-radius: var(--r-md);
      text-align: left;
      transition: all .2s;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .sev-pick-card:hover {
      transform: translateY(-2px);
      border-color: var(--sev);
    }

    .sev-pick-card.crit {
      --sev: var(--crit);
    }

    .sev-pick-card.high {
      --sev: var(--high);
    }

    .sev-pick-card.med {
      --sev: var(--med);
    }

    .sev-pick-card.low {
      --sev: var(--low);
    }

    .sev-pick-card.unsure {
      --sev: var(--ink-400);
    }

    .sev-pick-card.selected {
      border-color: var(--sev);
      background: color-mix(in srgb, var(--sev) 8%, white);
      box-shadow: 0 0 0 1px var(--sev);
    }

    .sev-pick-card .sev-blob {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--sev);
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--sev) 20%, transparent);
      flex-shrink: 0;
    }

    .sev-pick-card .txt .t {
      display: block;
      color: var(--ink-1000);
      font-size: 14px;
      font-weight: 500;
    }

    .sev-pick-card .txt .d {
      display: block;
      color: var(--ink-500);
      font-size: 12px;
      margin-top: 2px;
    }

    @media (max-width: 480px) {
      .sev-pick {
        grid-template-columns: 1fr;
      }
    }

    

    .field label {
      display: block;
      font-size: 12px;
      color: var(--ink-500);
      font-family: var(--mono);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      margin-bottom: 8px;
    }

    .field input,
    .field select,
    .field textarea {
      width: 100%;
      background: var(--ink-50);
      border: 1px solid var(--ink-100);
      color: var(--ink-900);
      padding: 14px 16px;
      border-radius: 12px;
      font: inherit;
      font-size: 15px;
      transition: border-color .2s, background .2s;
      font-family: var(--body);
    }

    .field textarea {
      min-height: 130px;
      resize: vertical;
      font-family: var(--body);
    }

    .field input:focus,
    .field select:focus,
    .field textarea:focus {
      outline: none;
      border-color: var(--emerald-500);
      background: white;
      box-shadow: 0 0 0 3px rgba(31, 166, 122, .1);
    }

    .field input::placeholder,
    .field textarea::placeholder {
      color: var(--ink-300);
    }

    .field .help {
      margin-top: 6px;
      font-size: 12px;
      color: var(--ink-400);
      font-style: italic;
    }

    /* Which of the detail fields we cannot triage without. Pushed to the far end of the
       label so the field name still reads first and the tag is a glance, not a sentence.
       The label is uppercase mono, so the tags inherit that.

       Flex rather than a float: at 320px "AFFECTED URL OR ENDPOINT" and its tag cannot
       share a line, and a float drops the tag underneath the label and up against the
       input. As a flex item it keeps its own column and the label text wraps beside it. */
    .field label.has-tag {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
    }

    .field label .field-tag {
      flex: none;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.04em;
      color: var(--ink-450);
    }

    .field label .field-tag--req {
      color: var(--coral);
    }

    .field-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }



    /* Drop zone */
    .drop-zone {
      border: 2px dashed var(--ink-200);
      background: var(--ink-50);
      border-radius: var(--r-md);
      padding: 28px 20px;
      text-align: center;
      transition: all .25s;
      cursor: pointer;
      margin-bottom: 12px;
    }

    .drop-zone:hover,
    .drop-zone.dragging {
      border-color: var(--emerald-500);
      background: var(--emerald-50);
    }

    .drop-zone .dz-icn {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      background: white;
      margin: 0 auto 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--emerald-600);
      border: 1px solid var(--ink-100);
    }

    .drop-zone .dz-t {
      color: var(--ink-900);
      font-weight: 500;
      margin-bottom: 4px;
      font-size: 15px;
    }

    .drop-zone .dz-t span {
      color: var(--emerald-600);
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .drop-zone .dz-d {
      color: var(--ink-450);
      font-size: 12.5px;
      font-family: var(--mono);
      letter-spacing: 0.04em;
    }

    #fileInput {
      display: none;
    }

    .file-list {
      list-style: none;
      margin-top: 12px;
    }

    .file-list li {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 14px;
      background: var(--ink-50);
      border-radius: 10px;
      margin-bottom: 6px;
      font-size: 13px;
    }

    .file-list .fic {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: white;
      border: 1px solid var(--ink-100);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--emerald-600);
      flex-shrink: 0;
    }

    .file-list .fname {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .file-list .fsize {
      color: var(--ink-400);
      font-family: var(--mono);
      font-size: 11px;
    }

    .file-list .fx {
      color: var(--ink-400);
      padding: 4px;
      border-radius: 6px;
      transition: background .2s, color .2s;
    }

    .file-list .fx:hover {
      color: var(--coral);
      background: rgba(255, 107, 91, .1);
    }

    

    .btn-step {
      flex: 1;
      padding: 14px 22px;
      background: var(--emerald-500);
      color: white;
      border-radius: 12px;
      font-weight: 500;
      font-size: 15px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: none !important;
      gap: 8px;
      transition: background .2s, transform .15s;
    }

    .btn-step:hover {
      background: var(--emerald-600);
      transform: translateY(-1px);
    }

    .btn-step:disabled {
      background: var(--ink-100);
      color: var(--ink-450);
      cursor: not-allowed;
      transform: none;
    }

    .btn-back {
      padding: 14px 18px;
      background: transparent;
      color: var(--ink-500);
      border-radius: 12px;
      font-size: 14px;
      transition: color .2s, background .2s;
    }

    .btn-back:hover {
      color: var(--ink-900);
      background: var(--ink-50);
    }

    .checkbox-row {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 14px 16px;
      background: var(--ink-50);
      border-radius: 10px;
      margin-bottom: 18px;
      cursor: pointer;
      transition: background .2s;
    }

    .checkbox-row:hover {
      background: var(--emerald-50);
    }

    .checkbox-row input {
      margin-top: 2px;
      width: 18px;
      height: 18px;
      accent-color: var(--emerald-500);
    }

    .checkbox-row .cbx-text {
      flex: 1;
      font-size: 13.5px;
      color: var(--ink-700);
    }

    .checkbox-row .cbx-text strong {
      color: var(--ink-1000);
    }

    .checkbox-row .cbx-text .cb-note {
      color: var(--ink-450);
      font-size: 12px;
      margin-top: 3px;
      display: block;
    }

    

    .success-icn {
      width: 80px;
      height: 80px;
      background: linear-gradient(135deg, var(--emerald-500), var(--emerald-700));
      border-radius: 50%;
      margin: 0 auto 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      box-shadow: 0 0 0 8px rgba(31, 166, 122, .15), 0 20px 40px -10px rgba(31, 166, 122, .4);
      animation: scaleIn .6s var(--ease-out);
    }

    @keyframes scaleIn {
      from {
        transform: scale(0);
      }

      to {
        transform: scale(1);
      }
    }

    .success-pane h3 {
      font-family: var(--font-display);
      font-size: 30px;
      font-weight: 400;
      letter-spacing: -0.02em;
      color: var(--ink-1000);
      margin-bottom: 12px;
    }

    

    .success-pane .ticket {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--ink-50);
      border: 1px solid var(--ink-100);
      color: var(--ink-700);
      padding: 10px 18px;
      border-radius: 999px;
      font-family: var(--mono);
      font-size: 13px;
      margin: 8px 0 20px;
    }

    .success-pane .ticket .lbl {
      color: var(--ink-450);
    }

    .success-pane .ticket .id {
      color: var(--emerald-600);
      font-weight: 600;
    }

    .success-pane p {
      color: var(--ink-500);
      font-size: 15px;
      max-width: 380px;
      margin: 0 auto;
    }

    .next-steps {
      margin-top: 32px;
      text-align: left;
      background: var(--ink-50);
      border-radius: var(--r-md);
      padding: 20px;
    }

    .next-steps .head {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--emerald-600);
      margin-bottom: 14px;
    }

    .next-steps ul {
      list-style: none;
    }

    .next-steps li {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 10px 0;
      font-size: 14px;
      color: var(--ink-700);
      border-bottom: 1px solid var(--ink-100);
    }

    .next-steps li:last-child {
      border-bottom: none;
    }

    .next-steps .step-num {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: white;
      border: 1px solid var(--ink-100);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--mono);
      font-size: 11px;
      color: var(--emerald-600);
      font-weight: 600;
      flex-shrink: 0;
    }

    /* SAFE HARBOR */
    .safe-harbor {
      background: linear-gradient(180deg, var(--emerald-50) 0%, var(--paper) 100%);
    }

    .harbor-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }

    @media (max-width: 900px) {
      .harbor-grid {
        grid-template-columns: 1fr;
      }
    }

    .harbor-card {
      background: white;
      border: 1px solid var(--ink-100);
      border-radius: var(--r-lg);
      padding: 36px;
      position: relative;
      overflow: hidden;
      transition: border-color .3s, transform .3s;
    }

    .harbor-card:hover {
      border-color: var(--emerald-300);
      transform: translateY(-2px);
    }

    .harbor-card.dark {
      background: linear-gradient(180deg, var(--ink-1000), var(--emerald-950));
      color: white;
      border-color: rgba(31, 166, 122, .2);
    }

    .harbor-card.dark::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(60% 50% at 100% 0%, rgba(31, 166, 122, .25) 0%, transparent 60%);
      pointer-events: none;
    }

    .harbor-card .tag {
      display: inline-block;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      padding: 6px 12px;
      border-radius: 999px;
      margin-bottom: 24px;
      position: relative;
      z-index: 1;
    }

    .harbor-card.dark .tag {
      background: rgba(31, 166, 122, .15);
      color: var(--emerald-300);
      border: 1px solid rgba(31, 166, 122, .3);
    }

    .harbor-card:not(.dark) .tag {
      background: var(--emerald-50);
      color: var(--emerald-700);
      border: 1px solid var(--emerald-200);
    }

    .harbor-card h3 {
      font-family: var(--font-display);
      font-size: 32px;
      font-weight: 400;
      line-height: 1.1;
      letter-spacing: -0.02em;
      margin-bottom: 22px;
      position: relative;
      z-index: 1;
    }

    .harbor-card.dark h3 {
      color: white;
    }

    

    

    .harbor-list {
      list-style: none;
      position: relative;
      z-index: 1;
    }

    .harbor-list li {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      padding: 14px 0;
      font-size: 15px;
      line-height: 1.5;
      border-bottom: 1px dashed;
    }

    .harbor-card.dark .harbor-list li {
      border-color: rgba(255, 255, 255, .08);
      color: rgba(255, 255, 255, .85);
    }

    .harbor-card:not(.dark) .harbor-list li {
      border-color: var(--ink-100);
      color: var(--ink-700);
    }

    .harbor-list li:last-child {
      border-bottom: none;
    }

    .harbor-list .cross {
      flex-shrink: 0;
      margin-top: 2px;
      color: var(--coral);
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: rgba(255, 107, 91, .1);
      border: 1px solid rgba(255, 107, 91, .3);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .harbor-list .tick {
      flex-shrink: 0;
      margin-top: 2px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: rgba(31, 166, 122, .15);
      border: 1px solid rgba(31, 166, 122, .4);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--emerald-300);
    }

    /* SECURITY POSTURE */
    .posture {
      background: var(--ink-1000);
      color: white;
    }

    .posture .section-head h2 {
      color: white;
    }

    .posture .section-head p {
      color: rgba(255, 255, 255, .6);
    }

    .posture .eyebrow {
      color: var(--emerald-400);
    }

    .posture-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 18px;
      grid-auto-rows: minmax(200px, auto);
    }

    .p-card {
      background: linear-gradient(180deg, rgba(255, 255, 255, .03) 0%, rgba(255, 255, 255, .01) 100%);
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: var(--r-lg);
      padding: 28px;
      position: relative;
      overflow: hidden;
      transition: border-color .3s, transform .3s;
    }

    .p-card:hover {
      border-color: rgba(31, 166, 122, .4);
      transform: translateY(-4px);
    }

    .p-card .p-icn {
      width: 42px;
      height: 42px;
      border-radius: 10px;
      background: rgba(31, 166, 122, .12);
      border: 1px solid rgba(31, 166, 122, .3);
      color: var(--emerald-300);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 18px;
    }

    .p-card .p-lbl {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--emerald-400);
      letter-spacing: 0.14em;
      text-transform: uppercase;
      margin-bottom: 10px;
    }

    .p-card h3 {
      font-family: var(--font-display);
      font-size: 22px;
      font-weight: 400;
      line-height: 1.15;
      color: white;
      letter-spacing: -0.01em;
      margin-bottom: 10px;
    }

    .p-card p {
      color: rgba(255, 255, 255, .6);
      font-size: 13.5px;
      line-height: 1.55;
    }

    .p-span-2 {
      grid-column: span 2;
    }

    .p-span-3 {
      grid-column: span 3;
    }

    .p-span-4 {
      grid-column: span 4;
    }

    .iso-emblem {
      margin-top: 22px;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 16px;
      background: rgba(31, 166, 122, .08);
      border: 1px solid rgba(31, 166, 122, .2);
      border-radius: 10px;
    }

    .iso-emblem .em-ring {
      position: relative;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--emerald-500), var(--emerald-700));
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .iso-emblem .em-ring::after {
      content: '';
      position: absolute;
      inset: -4px;
      border: 1px solid var(--emerald-400);
      border-radius: 50%;
      animation: pulse-ring 2s ease-out infinite;
    }

    .iso-emblem .em-text .code {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--emerald-300);
      letter-spacing: 0.1em;
    }

    .iso-emblem .em-text .name {
      color: white;
      font-size: 13px;
      font-weight: 500;
      margin-top: 2px;
    }

    .certs-row {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 20px;
    }

    .cert-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 14px;
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 999px;
      font-family: var(--mono);
      font-size: 11px;
      color: rgba(255, 255, 255, .85);
      letter-spacing: 0.06em;
    }

    .cert-pill .dot {
      width: 6px;
      height: 6px;
      background: var(--emerald-400);
      border-radius: 50%;
      box-shadow: 0 0 0 2px rgba(31, 166, 122, .2);
      animation: pulse 2s ease-in-out infinite;
    }

    .pen-timeline {
      margin-top: 20px;
      position: relative;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
    }

    .pen-timeline::before {
      content: '';
      position: absolute;
      top: 14px;
      left: 8px;
      right: 8px;
      height: 1px;
      background: rgba(31, 166, 122, .3);
      z-index: 0;
    }

    .pt-col {
      position: relative;
      z-index: 1;
    }

    .pt-col .pt-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--emerald-400);
      margin: 8px auto 12px;
      box-shadow: 0 0 0 3px rgba(31, 166, 122, .2);
    }

    .pt-col.now .pt-dot {
      background: var(--emerald-400);
      box-shadow: 0 0 0 3px rgba(31, 166, 122, .3), 0 0 20px var(--emerald-400);
      animation: pulse-now 1.5s ease-in-out infinite;
    }

    @keyframes pulse-now {

      0%,
      100% {
        transform: scale(1);
      }

      50% {
        transform: scale(1.2);
      }
    }

    .pt-col.future .pt-dot {
      background: rgba(255, 255, 255, .15);
      box-shadow: none;
    }

    .pt-col .pt-lbl {
      font-family: var(--mono);
      font-size: 10px;
      color: rgba(255, 255, 255, .5);
      letter-spacing: 0.1em;
      text-align: center;
      margin-bottom: 4px;
    }

    .pt-col .pt-name {
      font-size: 12px;
      color: white;
      text-align: center;
      font-weight: 500;
    }

    @media (max-width: 900px) {

      .p-span-2,
      .p-span-3,
      .p-span-4 {
        grid-column: span 6;
      }

      .posture-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 540px) {
      .posture-grid {
        grid-template-columns: 1fr;
      }

      .p-span-2,
      .p-span-3,
      .p-span-4 {
        grid-column: span 1;
      }
    }

    /* ALT CHANNELS */
    .alt-channels {
      background: var(--paper);
    }

    .channel-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }

    @media (max-width: 900px) {
      .channel-grid {
        grid-template-columns: 1fr;
      }
    }

    .ch-card {
      background: white;
      border: 1px solid var(--ink-100);
      border-radius: var(--r-lg);
      padding: 32px;
      transition: border-color .3s, transform .3s, box-shadow .3s;
      display: flex;
      flex-direction: column;
    }

    .ch-card:hover {
      border-color: var(--emerald-300);
      transform: translateY(-4px);
      box-shadow: 0 20px 50px -20px rgba(31, 166, 122, .2);
    }

    .ch-card .ch-icn {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      background: var(--emerald-50);
      border: 1px solid var(--emerald-200);
      color: var(--emerald-700);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 22px;
    }

    .ch-card .ch-lbl {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--emerald-600);
      letter-spacing: 0.14em;
      text-transform: uppercase;
      margin-bottom: 10px;
    }

    .ch-card h3 {
      font-family: var(--font-display);
      font-size: 26px;
      font-weight: 400;
      line-height: 1.15;
      color: var(--ink-1000);
      letter-spacing: -0.01em;
      margin-bottom: 10px;
    }

    .ch-card p {
      color: var(--ink-500);
      font-size: 14.5px;
      margin-bottom: 20px;
      flex: 1;
    }

    .ch-card a.ch-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      color: var(--emerald-700);
      font-weight: 500;
      transition: gap .2s;
    }

    .ch-card a.ch-link:hover {
      gap: 12px;
    }

    /* FINAL CTA */


    

    .final-cta h2 {
      font-size: clamp(38px, 5.5vw, 76px);
      margin-bottom: 24px;
      color: white;
    }

    

    .final-cta p {
      color: rgba(255, 255, 255, .65);
      font-size: 18px;
      max-width: 560px;
      margin: 0 auto 36px;
    }

    

    /* FOOTER */
    footer {
      background: #050807;
      color: rgba(255, 255, 255, .7);
      padding: 80px 0 40px;
      border-top: 1px solid rgba(255, 255, 255, .06);
    }















    .footer-col h4 {
      color: white;
      font-size: 13px;
      font-family: var(--mono);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      margin-bottom: 18px;
    }



















    /* Toast for form validation messages */
    .toast {
      position: fixed;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--ink-900);
      color: white;
      padding: 12px 20px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, .12);
      font-size: 13px;
      z-index: 200;
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s, transform .3s;
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }

    .toast.show {
      opacity: 1;
      transform: translateX(-50%) translateY(-8px);
    }

    .toast .tk {
      width: 8px;
      height: 8px;
      background: var(--emerald-400);
      border-radius: 50%;
    }


    /* UBW-222: opacity hides the three inactive words from sight only - they stay in the
       accessibility tree, so the H1 announces as "Found something? We're listening. grateful.
       on it. all ears." visibility removes them properly and keeps their box, and the delayed
       0s step holds a word visible for exactly as long as its fade-out paints, so nothing on
       screen changes. */
    .word-swap .word {
      visibility: hidden;
      transition: opacity .55s var(--ease-out), transform .55s var(--ease-out), visibility 0s linear .55s;
    }

    .word-swap .word.active {
      visibility: visible;
      transition: opacity .55s var(--ease-out), transform .55s var(--ease-out), visibility 0s linear 0s;
    }

    @media (prefers-reduced-motion: reduce) {
      .word-swap .word {
        transition-delay: 0s !important;
      }
    }