/* ==========================================================================
   app.css — design system lifted from the reference funnel.

   Cream ground, forest-green primary, tan info cards, amber data accent,
   crimson fear screens, deep-green hope screen. One centred ~500px column
   from mobile to desktop: it is a phone screen that happens to render wide.
   ========================================================================== */

:root {
  --bg:            #F7F5F0;
  --ink:           #241E17;
  --ink-soft:      #6B6255;
  --ink-faint:     #9A9083;

  --primary:       #2E5A46;
  --primary-dark:  #24493A;
  --primary-tint:  #EBF2EC;

  --card:          #FFFFFF;
  --tan:           #EDE4D5;
  --tan-deep:      #E3D7C4;

  --amber:         #E8A33C;
  --crimson:       #A11E1E;
  --forest:        #1F3B2B;

  --rule:          #E4DED2;
  --shadow:        0 1px 2px rgba(36,30,23,.05), 0 4px 14px -8px rgba(36,30,23,.18);

  --col:           500px;
  --radius:        15px;
  --radius-sm:     11px;

  --font-display:  'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body:     'Lato', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---- shell ------------------------------------------------------------ */
#root { min-height: 100dvh; }

.screen {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;
}

.screen__inner {
  width: 100%;
  max-width: var(--col);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 22px;
  padding-bottom: 32px;
  flex: 1;
}

/* Every screen has a pinned CTA, so every screen reserves footer space. */
.screen--sticky .screen__inner {
  padding-bottom: calc(104px + env(safe-area-inset-bottom));
}

/* ---- chrome: back arrow + progress bar -------------------------------- */
.chrome {
  width: 100%;
  max-width: var(--col);
  padding: 18px 0 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.chrome__back {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: none; border: 0; cursor: pointer;
  color: var(--ink);
  margin-left: -6px;
  border-radius: 8px;
}
.chrome__back:hover { background: rgba(36,30,23,.06); }
.chrome__back svg { width: 20px; height: 20px; }
.chrome__back[hidden] { visibility: hidden; }

.bar {
  height: 5px;
  background: var(--tan-deep);
  border-radius: 99px;
  overflow: hidden;
}
.bar__fill {
  height: 100%;
  background: var(--primary);
  border-radius: 99px;
  width: 0;
  transition: width .38s cubic-bezier(.4,0,.2,1);
}

/* Reserve the chrome height even when hidden, so nothing jumps. */
.chrome--hidden { visibility: hidden; }

/* ---- typography ------------------------------------------------------- */
.q {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.65rem, 5.6vw, 2.15rem);
  line-height: 1.16;
  letter-spacing: -.018em;
  text-align: center;
  text-wrap: balance;
  margin: 0;
}

.q--big {
  font-size: clamp(1.9rem, 7vw, 2.55rem);
}

.sub {
  text-align: center;
  color: var(--ink-soft);
  font-size: 1.03rem;
  margin: -8px 0 0;
  text-wrap: balance;
}

.accent { color: var(--primary); }

.fine {
  text-align: center;
  color: var(--ink-faint);
  font-size: .78rem;
  line-height: 1.5;
}
.fine a { color: var(--ink-faint); }

/* ---- options ---------------------------------------------------------- */
.options {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin: 6px 0 0;
}

.opt {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 52px 16px 20px;
  background: var(--card);
  border: 1.5px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.06rem;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: border-color .15s, background .15s, transform .08s;
}
.opt:hover { border-color: var(--primary); }
.opt:active { transform: scale(.988); }

.opt[aria-pressed='true'],
.opt[aria-checked='true'] {
  background: var(--primary-tint);
  border-color: var(--primary);
  color: var(--primary-dark);
}

/* multi-select rows carry a checkbox on the right */
.opt--multi { padding-right: 60px; background: var(--tan); border-color: transparent; }
.opt--multi[aria-checked='true'] { background: var(--primary-tint); }

.opt__box {
  position: absolute;
  right: 16px; top: 50%;
  transform: translateY(-50%);
  width: 27px; height: 27px;
  border-radius: 7px;
  border: 1.5px solid var(--rule);
  background: var(--card);
  display: grid; place-items: center;
}
.opt[aria-checked='true'] .opt__box {
  background: var(--primary);
  border-color: var(--primary);
}
.opt__box svg { width: 15px; height: 15px; color: #fff; opacity: 0; }
.opt[aria-checked='true'] .opt__box svg { opacity: 1; }

/* ---- segment tiles (entry screen) ------------------------------------- */
.tiles { display: flex; flex-direction: column; gap: 20px; }

.tile {
  position: relative;
  min-height: 104px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 72px 18px 132px;
  background: var(--tan);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  overflow: visible;
  transition: transform .08s;
}
.tile:active { transform: scale(.99); }

.tile__img {
  position: absolute;
  left: 0; bottom: 0;
  width: 132px;
  height: 130px;
  object-fit: contain;
  object-position: bottom left;
  pointer-events: none;
}

.tile__go {
  position: absolute;
  right: 18px; top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 99px;
  background: var(--primary);
  color: #fff;
  display: grid; place-items: center;
}
.tile__go svg { width: 20px; height: 20px; }

/* ---- buttons ---------------------------------------------------------- */
.btn {
  width: 100%;
  min-height: 62px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.13rem;
  cursor: pointer;
  transition: background .15s, transform .08s;
}
.btn:hover { background: var(--primary-dark); }
.btn:active { transform: scale(.99); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: #f2f2f2; }

/* sticky footer CTA on long screens */
.screen { transform: none !important; filter: none; }

.cta-sticky {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 62%, transparent);
  z-index: 20;
  display: flex;
  justify-content: center;
}
.cta-sticky .btn { max-width: none; border-radius: var(--radius-sm); }

/* fear/hope screens use a full-bleed white bar */
.tone-fear .cta-sticky, .tone-hope .cta-sticky {
  background: none;
  padding: 0;
}
.tone-fear .cta-sticky .btn, .tone-hope .cta-sticky .btn {
  border-radius: 14px 14px 0 0;
  margin: 0 12px;
  min-height: 66px;
}

/* The sticky bar is centred on wide screens so it tracks the content column. */
.cta-sticky .btn { max-width: var(--col); }

/* ---- slider ----------------------------------------------------------- */
.slider { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }

.slider__badge {
  align-self: center;
  position: relative;
  padding: 7px 16px;
  border-radius: 9px;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  transition: transform .1s;
}
.slider__badge::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -6px;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: inherit;
  border-bottom: 0;
}
.slider__badge--amber { background: var(--amber); border-top-color: var(--amber); }
.slider__badge--green { background: #5C9A63; border-top-color: #5C9A63; }

.slider__track {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 13px;
  border-radius: 99px;
  background: linear-gradient(90deg, #3E8B54 0%, #9BBF4B 28%, #E8C33C 55%, #E07A2C 78%, #D93A2B 100%);
  cursor: pointer;
}
.slider__track::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 30px; height: 30px;
  border-radius: 99px;
  background: #fff;
  border: 2.5px solid var(--ink);
  cursor: grab;
}
.slider__track::-moz-range-thumb {
  width: 30px; height: 30px;
  border-radius: 99px;
  background: #fff;
  border: 2.5px solid var(--ink);
  cursor: grab;
}

.slider__ends {
  display: flex; justify-content: space-between;
  color: var(--ink-soft); font-size: .95rem;
}

/* ---- 1–5 scale -------------------------------------------------------- */
.scale { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.scale__row { display: flex; gap: 10px; justify-content: center; }
.scale__btn {
  flex: 1 1 0;
  max-width: 74px;
  aspect-ratio: 1;
  border: 0;
  border-radius: 13px;
  background: var(--tan);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  cursor: pointer;
  transition: background .15s, transform .08s;
}
.scale__btn:hover { background: var(--tan-deep); }
.scale__btn:active { transform: scale(.96); }
.scale__btn[aria-pressed='true'] { background: var(--primary); color: #fff; }
.scale__ends {
  display: flex; justify-content: space-between;
  color: var(--ink-soft); font-size: .95rem;
}

/* ---- cards ------------------------------------------------------------ */
.tancard {
  background: var(--tan);
  border-radius: var(--radius);
  padding: 22px 24px;
  text-align: center;
  font-size: 1.06rem;
  line-height: 1.55;
}

.pill {
  align-self: center;
  background: var(--tan);
  border-radius: var(--radius-sm);
  padding: 14px 22px;
  font-size: 1.05rem;
  text-align: center;
}

/* ---- loader ----------------------------------------------------------- */
.loader { display: grid; place-items: center; gap: 8px; flex: 1; }
.ring { position: relative; width: 176px; height: 176px; }
.ring svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.ring__bg { fill: none; stroke: var(--tan-deep); stroke-width: 12; }
.ring__fg {
  fill: none; stroke: var(--primary); stroke-width: 12; stroke-linecap: round;
  transition: stroke-dashoffset .25s linear;
}
.ring__pct {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.85rem;
  font-variant-numeric: tabular-nums;
}

/* ---- verdict ---------------------------------------------------------- */
.verdict { display: flex; flex-direction: column; gap: 16px; }

.verdict__profile {
  position: relative;
  background: var(--tan);
  border-radius: var(--radius);
  padding: 20px 140px 20px 22px;
  min-height: 148px;
  overflow: hidden;
}
.verdict__profile img {
  position: absolute; right: 0; bottom: 0;
  width: 140px; height: 148px; object-fit: contain; object-position: bottom right;
}
.verdict__row + .verdict__row { margin-top: 14px; }
.verdict__k { color: var(--ink-soft); font-size: .95rem; }
.verdict__v { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; }

.verdict__risk {
  background: var(--tan);
  border-radius: var(--radius);
  padding: 20px 22px 22px;
  display: flex; flex-direction: column; gap: 12px;
}
.verdict__riskhead { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.verdict__riskhead h3 {
  margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.08rem;
}
.badge-risk {
  background: #D93A2B; color: #fff;
  border-radius: 99px; padding: 5px 15px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

.gauge { position: relative; padding-bottom: 24px; }
.gauge__track {
  height: 11px; border-radius: 99px;
  background: linear-gradient(90deg, #2E8B4E 0 33%, #E8912C 33% 60%, #D93A2B 60% 100%);
}
.gauge__marker {
  position: absolute; top: -4px;
  width: 19px; height: 19px; border-radius: 99px;
  background: var(--ink); border: 2.5px solid var(--tan);
  transform: translateX(-50%);
}
.gauge__labels {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-between;
  color: var(--ink-soft); font-size: .9rem;
}

.verdict__note { font-size: 1rem; line-height: 1.55; }
.verdict__note strong { font-weight: 700; }

.disclaimer {
  text-align: center; font-style: italic;
  color: var(--ink-faint); font-size: .8rem;
}

/* ---- charts ----------------------------------------------------------- */
.chart { width: 100%; }
.chart svg { width: 100%; height: auto; overflow: visible; }
.chart__label {
  font-family: var(--font-display); font-weight: 700; font-size: 12px; fill: #fff;
}
.chart__axis { font-family: var(--font-body); font-size: 13px; fill: var(--ink-soft); }
.source {
  font-size: .84rem; color: var(--ink-soft); line-height: 1.5;
}
.source b { display: block; color: var(--ink); font-family: var(--font-display); margin-bottom: 3px; }

.datepill {
  align-self: center;
  background: var(--tan);
  border-radius: 13px;
  padding: 13px 26px;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.15rem, 4.4vw, 1.45rem);
}

/* ---- checks ----------------------------------------------------------- */
.checks { display: flex; flex-direction: column; gap: 13px; }
.checks--grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px;
}
.check { display: flex; align-items: flex-start; gap: 11px; font-size: 1.02rem; }
.check__i {
  flex: none; width: 25px; height: 25px; border-radius: 99px;
  background: var(--primary); color: #fff;
  display: grid; place-items: center; margin-top: 1px;
}
.check__i svg { width: 14px; height: 14px; }
.check span { font-family: var(--font-display); font-weight: 600; }

/* ---- testimonial ------------------------------------------------------ */
.review {
  background: var(--tan);
  border-radius: var(--radius);
  padding: 22px 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.review__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.review__stars { color: var(--amber); letter-spacing: 2px; font-size: 1.05rem; }
.review__who { color: var(--ink-soft); font-size: .95rem; }
.review__title { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; }
.review p { margin: 0; line-height: 1.55; }

/* ---- proof ------------------------------------------------------------ */
.proof { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.proof__big {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(3rem, 13vw, 4.6rem); line-height: .96; letter-spacing: -.03em;
  text-align: center;
}
.proof__label {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.3rem, 5vw, 1.85rem); text-align: center; margin-top: -4px;
}
.proof__rate { display: flex; align-items: center; gap: 12px; }
.proof__rate b { font-family: var(--font-display); font-size: 2.1rem; font-weight: 700; }
.proof__rate small { display: block; color: var(--ink-soft); font-size: .88rem; }
.proof__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 100%; max-width: 420px; }
.proof__grid img { width: 100%; aspect-ratio: 1; border-radius: 99px; object-fit: cover; }

/* ---- tone screens (fear / hope) --------------------------------------- */
.tone-fear, .tone-hope { color: #fff; }
.tone-fear { background: var(--crimson); }
.tone-hope { background: var(--forest); }
.tone-fear .screen__inner, .tone-hope .screen__inner {
  justify-content: center; text-align: center; gap: 18px; padding-bottom: 96px;
}
.tone-fear .q, .tone-hope .q { color: #fff; }
.tone-fear p, .tone-hope p { color: rgba(255,255,255,.93); font-size: 1.06rem; line-height: 1.55; }
.tone-img { width: 100%; max-width: 300px; margin: 0 auto; }

/* ---- email ------------------------------------------------------------ */
.field {
  width: 100%; min-height: 62px;
  padding: 0 20px;
  border: 1.5px solid var(--rule);
  border-radius: var(--radius-sm);
  background: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
  text-align: center;
}
.field::placeholder { color: var(--ink-faint); font-weight: 400; }
.field:focus { border-color: var(--primary); outline: none; }
.field[aria-invalid='true'] { border-color: #D93A2B; }
.field-error { color: #B3271A; font-size: .9rem; text-align: center; }

/* ---- checkout --------------------------------------------------------- */
.summary {
  background: var(--tan); border-radius: var(--radius); padding: 18px 22px;
  display: flex; flex-direction: column; gap: 10px;
}
.summary li { list-style: none; display: flex; gap: 10px; align-items: flex-start; font-size: 1rem; }
.summary ul { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.whop-wrap { min-height: 520px; }

/* ---- placeholder art -------------------------------------------------- */
.ph-note {
  text-align: center; font-size: .74rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint);
}

/* ---- motion ----------------------------------------------------------- */
.screen__inner { animation: fade .24s ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ---- small screens ---------------------------------------------------- */
@media (max-width: 400px) {
  body { font-size: 16px; }
  .opt { min-height: 68px; font-size: 1rem; }
  .tile { padding-left: 112px; font-size: 1.15rem; }
  .tile__img { width: 112px; height: 110px; }
  .checks--grid { grid-template-columns: 1fr; }
}


/* ==========================================================================
   Offer screen — product, price, and the checkout modal
   ========================================================================== */

.price {
  background: var(--card);
  border: 1.5px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 22px 22px;
  text-align: center;
  position: relative;
}

.price__badge {
  display: inline-block;
  background: var(--primary-tint);
  color: var(--primary-dark);
  border-radius: 99px;
  padding: 5px 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .02em;
  margin-bottom: 10px;
}

.price__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.32rem;
  line-height: 1.2;
}
.price__sub { color: var(--ink-soft); font-size: .98rem; margin-top: 1px; }

.price__row {
  display: flex; align-items: baseline; justify-content: center; gap: 12px;
  margin-top: 12px;
}
.price__was { color: var(--ink-faint); font-size: 1.3rem; text-decoration-thickness: 2px; }
.price__now {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 10vw, 3rem);
  letter-spacing: -.03em;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.price__note { color: var(--ink-soft); font-size: .92rem; margin-top: 4px; }

.price__off {
  align-self: center;
  background: var(--crimson);
  color: #fff;
  border-radius: 7px;
  padding: 4px 9px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .03em;
}

/* ---- modal ------------------------------------------------------------ */
.modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center; }
.modal[hidden] { display: none; }

.modal__scrim {
  position: absolute; inset: 0;
  background: rgba(30, 24, 18, .55);
  animation: scrim .2s ease both;
}
@keyframes scrim { from { opacity: 0 } to { opacity: 1 } }

.modal__panel {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 92dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-radius: 18px 18px 0 0;
  overflow: hidden;
  animation: sheet .28s cubic-bezier(.32,.72,.34,1) both;
}
@keyframes sheet { from { transform: translateY(100%) } to { transform: none } }

/* Keyframes are global no matter where they are declared, so the desktop
   entrance gets its own name rather than redefining `sheet`. */
@keyframes pop { from { transform: translateY(24px); opacity: 0 } to { transform: none; opacity: 1 } }

@media (min-width: 620px) {
  .modal { align-items: center; padding: 24px; }
  .modal__panel {
    border-radius: 18px;
    max-height: min(88dvh, 860px);
    max-width: 640px;
    animation-name: pop;
  }
}

.modal__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  flex: none;
}
.modal__x {
  width: 34px; height: 34px; border: 0; border-radius: 9px;
  background: var(--tan); font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.modal__x:hover { background: var(--tan-deep); }

/* The embed sizes itself; the body just gives it the full width and gets
   out of the way. No flex centring — that fights the iframe's own layout. */
.modal__body {
  flex: 1;
  overflow-y: auto;
  min-height: 460px;
  padding: 0;
  position: relative;
  background: #fff;
}
.modal__body > * { width: 100%; }
.modal__body iframe { display: block; width: 100%; max-width: 100%; border: 0; }

.modal__loading {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  color: var(--ink-soft); font-size: .95rem;
}
.spinner {
  width: 30px; height: 30px; border-radius: 99px;
  border: 3px solid var(--tan-deep);
  border-top-color: var(--primary);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }
.modal__body iframe { width: 100%; border: 0; }

@media (prefers-reduced-motion: reduce) {
  .modal__scrim, .modal__panel { animation: none; }
}

/* ---- testimonial photo ------------------------------------------------ */
.review__top { align-items: center; }
.review__photo {
  width: 54px; height: 54px; border-radius: 99px; object-fit: cover;
  flex: none; border: 2px solid var(--card);
}
.review__id { display: flex; flex-direction: column; align-items: flex-end; margin-left: auto; }

/* The product shot is capped by height so the price stays above the fold. */
.offer__shot {
  width: auto;
  max-width: 100%;
  max-height: 32dvh;
  object-fit: contain;
  margin: 0 auto;
}

/* ---- success download button ------------------------------------------ */
.dl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-decoration: none;
  padding: 14px 22px;
  min-height: 74px;
  text-align: left;
}
.dl__icon {
  flex: none;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(255,255,255,.16);
  display: grid; place-items: center;
}
.dl__icon svg { width: 20px; height: 20px; }
.dl small {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: .82rem;
  opacity: .8;
  margin-top: 1px;
}