/* ===== Hero + Showcase (sits above your fixed background canvas) ===== */
:root{
  /* hero tint + background */
  --tint: 268 100% 63%;
  --bg-top: #ffffff;
  --bg-bottom: #efe9ff;

  /* grid spacing & strength */
  --grid-gap: 72px;          /* distance between lines (bigger = wider) */
  --grid-rgb: 23,5,60;
  --grid-alpha: .16;         /* line opacity; raise for stronger lines */

  /* plane depth controls */
  --grid-plane-height: 90vh; /* how tall the plane is (try 100vh) */
  --grid-tilt: 68deg;        /* smaller angle = flatter = more depth */
  --grid-depth-mask: 70%;    /* how far it stays opaque before fading */

  /* top bleed so hero background tucks under header */
  --bleed: 84px;

  /* showcase bar colors */
  --bar-top: #1a1642;
  --bar-mid: #14103a;
  --bar-bottom: #0c0a1e;

  /* grain overlays (opacity only via CSS; size via SVG baseFrequency) */
  --hero-grain-opacity: .18; /* hero grain strength */
  --bar-grain-opacity:  .16; /* showcase bar grain strength */
}

/* Make sure the hero sits above your fixed background canvas */
.hero, .showcase { position: relative; z-index: 2; }

/* ---------- HERO ---------- */
.hero{
min-height: 100vh; /* was: calc(100vh + var(--bleed)) */
  margin-top: calc(var(--bleed) * -1); /* keep the top bleed */
  padding-top: calc(clamp(2rem, 3vw, 4rem) + var(--bleed)); /* keep content clear of header */
  padding: clamp(2rem, 3vw, 4rem);
  display: grid;
  place-items: center;
  overflow: hidden;
  background-image:
    radial-gradient(1000px 520px at 50% 90px, hsl(var(--tint) / .17), transparent 60%),
    radial-gradient(800px 360px at 50% 110px, hsl(var(--tint) / .07), transparent 55%),
    radial-gradient(1600px 900px at 50% -200px, rgba(10, 0, 45, .06), transparent 70%),
    linear-gradient(to bottom, var(--bg-top) 0%, var(--bg-bottom) 100%);
  background-repeat: no-repeat;
}

.hero .noise{
  position: absolute; inset: -1px;
  width: calc(100% + 2px); height: calc(100% + 2px);
  pointer-events: none; mix-blend-mode: multiply;
  opacity: var(--hero-grain-opacity);
}

.content{ position: relative; z-index: 2; text-align: center; }
.content h1{ font-size: clamp(2.2rem, 6vw, 4.2rem); line-height: 1.05; margin: 0 0 .75rem; font-weight: 800; }
.content .accent{ color: hsl(var(--tint)); }
.content p{ margin: 0; font-size: clamp(1rem, 1.6vw, 1.125rem); opacity: .9; }

/* 3D perspective grid */
.grid3d{
  position:absolute; left:50%; bottom:-2px;
  width: 160vmax;                          /* wider so edges never show */
  height: var(--grid-plane-height);        /* taller plane for more lines */
  transform-origin:50% 100%;
  transform: translateX(-50%) perspective(1100px) rotateX(var(--grid-tilt));
  background-image:
    linear-gradient(to right, rgba(var(--grid-rgb), var(--grid-alpha)) 1px, transparent 1px),
    linear-gradient(to top,   rgba(var(--grid-rgb), var(--grid-alpha)) 1px, transparent 1px);
  background-size: var(--grid-gap) var(--grid-gap);
  background-repeat: repeat;
  background-position: center bottom;

  /* delay fade: stays solid until var(--grid-depth-mask), then fades out */
  -webkit-mask-image: linear-gradient(to top,
    rgba(0,0,0,1) var(--grid-depth-mask), rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to top,
    rgba(0,0,0,1) var(--grid-depth-mask), rgba(0,0,0,0) 100%);
  backface-visibility: hidden;
  transform-style: preserve-3d;
  pointer-events:none;
}

.grid3d::after{
  content:""; position:absolute; left:-20%; right:-20%; bottom:-5%; height:160%;
  background: radial-gradient(80% 60% at 50% 0%, hsl(var(--tint)/.28), transparent 70%);
  pointer-events:none;
}

/* ---------- SHOWCASE BAR (dark section under hero) ---------- */
.showcase{
  z-index: 2;
  margin-top: 0;
  padding: 1.25rem 0 0;
}

.bar-bg{
  position: absolute; inset: 0; overflow: hidden;
  background-image:
    radial-gradient(70% 120% at 50% 30%, rgba(92, 72, 230, .32), transparent 60%),
    radial-gradient(100% 140% at -10% 50%, rgba(0,0,0,.55), transparent 55%),
    radial-gradient(100% 140% at 110% 50%, rgba(0,0,0,.55), transparent 55%),
    linear-gradient(to bottom, var(--bar-top) 0%, var(--bar-mid) 45%, var(--bar-bottom) 100%);
}

/* Optional: separate SVG overlay so you can tune grain opacity via CSS */
.bar-noise{
  position:absolute; inset:0;
  opacity: var(--bar-grain-opacity);
  mix-blend-mode: multiply;
  pointer-events:none;
}

/* Floating media card that overlaps hero by a bit */
.video-card{
  position: relative; z-index: 2;
  width: min(1200px, calc(100% - 3rem));
  margin: calc(64px * -1) auto 0;      /* 64px overlap; keep in sync with design */
  background: #ffffff00;
  overflow: hidden;
}

.video-ratio{
  aspect-ratio: 11 / 5;               /* locked 16:9 as requested */
  background: transparent;
  position: relative;
}
.video-ratio::before{
  content: ""; position:absolute; inset:0; pointer-events:none;
  background: transparent;
}
.play-btn{ position: absolute; inset: 0; display:grid; place-items:center; }
.play-btn span{
  display:inline-grid; place-items:center; width:86px; height:86px;
  border-radius:50%; background:#fff; box-shadow: 0 8px 28px rgba(0,0,0,.25);
}
.play-btn svg{ width:32px; height:32px; }
/* Let the section overflow so the card can overlap the hero */
.showcase{
  position: relative;
  z-index: 2;
  margin-top: 0;
  padding: 1.25rem 0 0;
  overflow: visible;          /* ⬅️ was hidden; allow upward overlap */
}

/* Clip & isolate ONLY the background/grain */
.bar-layers{
  position: absolute;
  inset: 0;
  overflow: hidden;           /* confine grain to this section */
  isolation: isolate;         /* limit mix-blend to this wrapper */
  contain: paint;             /* extra safety for Safari/iOS */
  z-index: 0;                 /* keep it behind the card */
}

.bar-bg{ position:absolute; inset:0; }

/* Make sure the SVG grain fits exactly and blends only inside bar-layers */
.bar-noise{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: var(--bar-grain-opacity, .16);
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Ensure the card sits above the background wrapper and can overlap the hero */
.video-card{
  position: relative;
  z-index: 1;                 /* above .bar-layers (z-index:0) */
  margin-top: calc(64px * -1);/* your overlap; adjust as needed */
}
:root{
      --brand: #7C3AED;           /* Purple hover fill */
      --text: #0F172A;            /* Black text */
      --muted: #6B7280;
      --surface: #ffffff;
      --pill: #f3f4f6;
      --ok: #10B981;
      --cta-border: #111827;      /* Black outline */

      --radius-pill: 999px;       /* For proof bar (desktop) */
      --shadow-soft: 0 8px 24px rgba(0,0,0,.06);
      --container: 1280px;
      --space-hero: clamp(56px, 8vw, 120px);
    }

    /* ===== Base ===== */
    *{ box-sizing: border-box; }
    html, body{ height:100%; }
    body{
      margin:0;
      font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans";
      background:var(--surface);
      color:var(--text);
      line-height:1.35;
    }
    .container{ width:min(var(--container),92%); margin-inline:auto; }

    /* ===== Hero ===== */
    .hero{ padding-block:var(--space-hero); text-align:center; }
    .hero h1{
      margin:0 0 14px;
      font-weight:900;
      letter-spacing:-0.02em;
      font-size:clamp(34px,5vw,64px);
    }
    .hero .accent-line{
      display:block;
      color:var(--brand);
      font-weight:900;
      letter-spacing:-0.02em;
      font-size:clamp(34px,7.5vw,72px);
      margin-top:6px;
    }
    .hero p.sub{
      margin:8px auto 24px;
      max-width:900px;
      color:var(--muted);
      font-weight:500;
      font-size:clamp(15px,1.3vw,20px);
    }

    /* ===== Proof bar ===== */
    .proof-bar{
      display:inline-flex;
      align-items:center;
      gap:20px;
      padding:10px 16px;
      background:var(--pill);
      border-radius:var(--radius-pill);
      box-shadow:var(--shadow-soft);
      margin:22px auto 36px;
      max-width:100%;
      flex-wrap:wrap;
    }
    .proof-item{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:8px 12px;
      font-weight:600;
      font-size:14px;
      color:#374151;
      white-space:nowrap;
    }
    .check{ width:18px;height:18px;flex:0 0 18px; }

    @media (min-width:1024px){
      .proof-bar{ flex-wrap:nowrap; gap:16px; }
      .proof-item{ font-size:clamp(13px,.95vw,16px); padding:6px 10px; }
    }
    @media (max-width:600px){
      :root{ --radius-pill:14px; } /* slightly rounded on mobile */
      .proof-item{ white-space:normal; }
    }

    /* ===== CTAs: pill outline, purple fill on hover, black text ===== */
    .cta-row{
      display:flex;
      justify-content:center;
      gap:18px;
      flex-wrap:nowrap;
      max-width:720px;
      margin:8px auto 0;
    }
    .container .btn{
      appearance:none;
      border:2px solid var(--cta-border); /* black outline */
      background:transparent;
      color:var(--text);                   /* black text */
      border-radius:9999px;                /* full curve */
      height:clamp(48px,6.2vw,60px);
      padding:0 28px;
      min-width:240px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-weight:800;
      font-size:clamp(14px,1.1vw,18px);
      text-decoration:none;
      cursor:pointer;
      transition:background .2s ease, color .2s ease, transform .04s ease, box-shadow .2s ease, border-color .2s ease;
      outline:none;
    }
    .container .btn:hover{
      background:var(--brand);             /* purple fill */
      color:white;                   /* keep text black */
      border-color:var(--cta-border);      /* keep black outline */
    }
    .container .btn:focus-visible{ box-shadow:0 0 0 4px rgba(17,24,39,.15); }
    .container .btn:active{ transform:translateY(1px); }

    @media (max-width:640px){
      .cta-row{ flex-direction:column; }
      .container .btn{ width:100%; min-width:0; }
    }

    @media (max-width:640px){
  .cta-row{ flex-direction:column; }
  .container .btn{ width:100%; min-width:0; }

  /* add top padding for mobile */
  .container {
    padding-top: 4rem;
  }
}


.video-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* keeps aspect ratio, fills box */
}
.video-ratio {
  position: relative; /* so the img and play button can be absolutely positioned */
}


/* ===== Logo Marquee ===== */
.logo-marquee{
  padding: clamp(28px, 6vw, 56px) 0 clamp(12px, 3vw, 24px);
  background:#fff; /* or transparent if you want it sitting on your second background */
}
.logo-marquee .logo-title{
  margin:0 auto 18px;
  text-align:center;
  font-weight:600;
  color:#334155;
  font-size: clamp(14px, 1.2vw, 16px);
}
.logo-marquee .brand-link{
  color:hsl(var(--tint));
  text-decoration:none;
  font-weight:800;
}

/* Scroller wrapper with edge fades */
.marquee{
  position: relative;
  overflow: hidden;
  padding-block: 12px;
  /* soft edge masks (works in modern browsers) */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
}

/* One track = one row of logos. We duplicate tracks for endless loop */
.marquee__track{
  display: inline-flex;
  align-items: center;
  gap: clamp(32px, 6vw, 72px);
  padding: 0 32px;  /* gives space under the mask */
  white-space: nowrap;
  animation: marquee-slide var(--marquee-speed, 28s) linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state: paused; }

/* Logos */
.marquee__track img{
  height: clamp(22px, 3.2vw, 36px);
  width: auto;
  display: block;
  opacity: .9;
  filter: saturate(0) contrast(1.1) brightness(0.2); /* tasteful mono look */
  transition: opacity .2s ease, filter .2s ease, transform .2s ease;
}
.marquee__track img:hover{
  opacity: 1;
  filter: none;                 /* restore original colors on hover */
  transform: translateY(-2px);
}


 /* ---------- Tunables ---------- */
  :root {
    --tb-maxw: 1200px;
    --tb-gap: 60px;          /* spacing between logos */
    --tb-logo-h: 54px;       /* logo height */
    --tb-speed: 22s;         /* scroll duration (lower = faster) */
    --tb-edge: 12%;          /* width of edge fade zones */
    --tb-text: #0f172a;      /* slate-900 */
    --tb-muted: #6b7280;     /* gray-500 */
    --tb-link: #3b82f6;      /* blue-500 */
    --tb-border: #e5e7eb;    /* gray-200 */
  }

  .trusted-by {
    padding: 4rem 0rem 2rem;
  }
  .tb-container {
    max-width: var(--tb-maxw);
    margin: 0 auto;
    padding: 0 20px;
  }
  .tb-title {
    margin: 0 0 22px;
    text-align: center;
    color: var(--tb-muted);
    font-size: 18px;
    line-height: 1.5;
  }
  .tb-title .tb-link {
    color: var(--tb-link);
    font-weight: 600;
    text-decoration: none;
  }
  .tb-title .tb-link:hover { text-decoration: underline; }

  /* Rail + infinite track */
  .tb-rail {
    position: relative;
    overflow: hidden;
    padding: 24px 0;
  }
  .tb-track {
    display: inline-flex;
    align-items: center;
    gap: var(--tb-gap);
    animation: tb-scroll var(--tb-speed) linear infinite;
    will-change: transform;
  }
  .tb-track img {
    height: var(--tb-logo-h);
    width: auto;
    object-fit: contain;
    opacity: 0.95;
    transition: opacity .2s ease;
    filter: drop-shadow(0 0 0 rgba(0,0,0,0)); /* keeps crisp edges */
  }
  .tb-track img:hover { opacity: 1; }

  /* Edge fades (works everywhere; avoids mask compat issues) */
  .tb-fade {
    position: absolute;
    top: 0; bottom: 0;
    width: var(--tb-edge);
    pointer-events: none;
  }
  .tb-fade-left {
    left: 0;
    background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
  }
  .tb-fade-right {
    right: 0;
    background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
  }


  /* Responsive tweaks */
  @media (max-width: 768px) {
    :root { --tb-gap: 44px; --tb-logo-h: 34px; --tb-edge: 18%; }
    .tb-title { font-size: 16px; }
  }

  .tb-rail::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--tb-border);     /* solid line */
  z-index: 1;                       /* sits under the fades */
}

/* keep track below the fades so both logos and line fade at edges */
.tb-track { z-index: 1; }
.tb-fade  { z-index: 2; }        

.tb-header {
  text-align: center;
  margin: 0 0 22px;
}

.tb-eyebrow {
  font-weight: 800;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #0f172a;           /* or var(--tb-text) */
  margin: 0 0 6px;
}

.tb-deck {
  font-size: 18px;
  line-height: 1.5;
  color: var(--tb-muted);
  margin: 0;
}

@media (max-width: 768px) {
  .tb-deck { font-size: 16px; }
}
/* Global Poppins override */
:root { --font-all: 'Poppins', sans-serif; }

html { font-family: var(--font-all); }

/* Force all elements + pseudo-elements to use Poppins */
*, *::before, *::after { 
  font-family: var(--font-all) !important;
}

/* Ensure form controls inherit properly */
button, input, select, textarea { 
  font: inherit;
}
/* Track has NO gap; groups carry spacing */
.tb-track{
  display: flex;
  gap: 0;
  animation: tb-scroll var(--tb-speed) linear infinite;
  will-change: transform;
}

.tb-group{
  display: inline-flex;
  align-items: center;
  gap: var(--tb-gap);                          /* spacing inside a group */
  padding-inline: calc(var(--tb-gap) / 2);     /* half-gap on each end -> full gap at the seam */
  flex: 0 0 auto;
  box-sizing: content-box;                     /* make that padding contribute to width */
}

.tb-group img{
  height: var(--tb-logo-h);
  width: auto;
  display: block;
  flex: 0 0 auto;                              /* never collapse */
  object-fit: contain;
  opacity: .95;
  transition: opacity .2s ease;
}

/* Fallback if some browsers ignore flex gap (older Safari etc.) */
@supports not (gap: 1rem) {
  .tb-group{ gap: 0; }
  .tb-group > img{ margin-right: var(--tb-gap); }
  .tb-group > img:last-child{ margin-right: 0; }
}
/* keep button above the thumbnail */
.play-btn{ z-index: 2; }

/* ripple ring(s) */
.play-btn span{
  position: relative;
  isolation: isolate; /* keep pseudo behind the white circle only */
}
.play-btn span::before,
.play-btn span::after{
  content:"";
  position:absolute; inset:0;
  border-radius:50%;
  border: 3px solid hsl(var(--tint) / .55);
  transform: scale(1);
  opacity: .6;
  animation: ripple 2.4s ease-out infinite;
  z-index: -1; /* behind the white circle */
}
.play-btn span::after{ animation-delay: 1.2s; } /* second wave */

@keyframes ripple{
  0%   { transform: scale(1);   opacity: .55; }
  100% { transform: scale(2.6); opacity: 0;   }
}

/* optional: speed up on hover/focus */
.play-btn:hover span::before,
.play-btn:hover span::after,
.play-btn:focus-visible span::before,
.play-btn:focus-visible span::after{
  animation-duration: 3s;
}

/* a11y: honor reduced motion */
@media (prefers-reduced-motion: reduce){
  .play-btn span::before,
  .play-btn span::after{ animation: none; }
}

/* contain blending to the hero/showcase only */
.hero, .showcase { isolation: isolate; contain: paint; }

/* stop blending with page; reduce to simple opacity */
.hero .noise,
.bar-noise{
  mix-blend-mode: normal;   /* was: multiply */
}

/* Undo the earlier broad contain */
.hero, .showcase { isolation: isolate; contain: none; }

/* Keep the cheap blend/opacity changes */
.hero .noise,
.bar-noise{
  mix-blend-mode: normal;
  opacity: .08;
  filter: none;
}

/* Contain JUST the heavy background of the showcase */
.bar-layers{
  isolation: isolate;
  contain: paint;       /* confines its own painting */
  z-index: 0;           /* stays behind the card */
}

/* Make sure the card can overlap upward */
.showcase{
  position: relative;
  z-index: 2;           /* paints above .hero (which appears earlier) */
  overflow: visible;    /* allow upward overlap */
}
.video-card{ position: relative; z-index: 2; } /* above .bar-layers */
.hero{ position: relative; z-index: 1; }       /* ensure stacking order */


/* Tunables */
:root{
  --tb-maxw: 1200px;
  --tb-gap: 60px;           /* space between logos */
  --tb-logo-h: 54px;
  --tb-speed: 22s;          /* time to move exactly one segment */
  --tb-edge: 12%;
  --tb-muted: #6b7280;
  --tb-border: #e5e7eb;
}

.trusted-by{ padding: 4rem 0 2rem; }
.tb-container{ max-width: var(--tb-maxw); margin: 0 auto; padding: 0 20px; }
.tb-header{ text-align: center; margin: 0 0 22px; }
.tb-eyebrow{ font-weight: 800; font-size: 18px; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 6px; }
.tb-deck{ font-size: 18px; line-height: 1.5; color: var(--tb-muted); margin: 0; }
@media (max-width:768px){ .tb-deck{ font-size:16px; } }

.tb-rail{ position: relative; overflow: hidden; padding: 24px 0; }
.tb-rail::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background: var(--tb-border); z-index:1;
}

/* Edge fades */
.tb-fade{ position:absolute; top:0; bottom:0; width:var(--tb-edge); pointer-events:none; z-index:2; }
.tb-fade-left{ left:0; background:linear-gradient(to right, #fff, rgba(255,255,255,0)); }
.tb-fade-right{ right:0; background:linear-gradient(to left, #fff, rgba(255,255,255,0)); }

/* Track has NO gap; segments own spacing & trailing spacer */
.tb-track{
  display:flex;
  gap:0;
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
  z-index:1;
  animation: none !important;     /* kill any leftover keyframe scroll */
}

/* One segment */
.tb-group{
  display:inline-flex;
  align-items:center;
  gap: var(--tb-gap);
  flex:0 0 auto;
  white-space: nowrap;
}

/* Trailing spacer = one more gap so segW includes the seam distance */
.tb-group::after{
  content:"";
  flex: 0 0 var(--tb-gap);
}

/* Logos */
.tb-group img{
  height: var(--tb-logo-h);
  width: auto;
  display:block;
  object-fit: contain;
  opacity:.95;
  transition: opacity .2s ease, transform .2s ease;
  flex:0 0 auto;
}
.tb-group img:hover{ opacity:1; transform: translateY(-2px); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .tb-track{ transform: none !important; }
}
/* Tighten the two-line hero heading */
.hero h1{
  margin: 0 0 4px;      /* was 14px */
  line-height: 1.02;    /* slightly tighter */
}
.hero .accent-line{
  margin-top: 0;        /* was 6px */
  line-height: 1.02;
}

/* If you want it ultra-tight, uncomment this: */
/* .hero .accent-line{ margin-top: -2px; } */

/* Optional: give mobiles a hair more breathing room */
@media (max-width: 640px){
  .hero h1{ margin-bottom: 2px; }
}
/* Mobile: dynamic single-line sizing WITHOUT ellipsis */
@media (max-width: 640px){
  /* enable container units for precise scaling */
  .content{ container-type: inline-size; }

  .hero h1,
  .hero .accent-line{
    white-space: nowrap;         /* force single line */
    max-width: 100%;
    line-height: 1.06;
    letter-spacing: -0.02em;
    font-size: clamp(18px, 9cqw, 32px);  /* scale with container width */
  }
  .hero h1{ margin-bottom: 2px; }
  .hero .accent-line{ margin-top: 0; }
}

/* Fallback if cqw isn't supported */
@supports not (font-size: 1cqw){
  @media (max-width: 640px){
    .hero h1,
    .hero .accent-line{
      white-space: nowrap;
      font-size: clamp(18px, 6.5vw, 32px);  /* viewport-based fallback */
    }
  }
}

/* Mobile: single-line, no ellipsis, simple viewport scaling */
@media (max-width: 640px){
  .hero h1,
  .hero .accent-line{
    white-space: nowrap;        /* stay on one line */
    overflow: visible;          /* no clipping */
    text-overflow: clip;        /* no … */
    font-size: clamp(18px, 5.2vw, 28px);  /* autoscale; tweak 5.2vw if needed */
    line-height: 1.06;
    letter-spacing: -0.02em;
  }
  .hero h1{ margin-bottom: 2px; }
  .hero .accent-line{ margin-top: 0; }
}
/* Mobile: left-align the proof items */
@media (max-width: 600px){
  .proof-bar{
    margin: 22px 0 36px;     /* was auto-centered; this left-aligns the pill */
    justify-content: flex-start;
    text-align: left;
  }
  .proof-item{
    align-items: flex-start;  /* icon + text align from the top-left */
    text-align: left;
  }
  .proof-item .check{
    margin-top: 0.18em;       /* keep tick aligned with the first line */
  }
}