@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/* Stylesheet for /resources/file-canada-crypto-tax/ only. Don't link it from other pages. */

/* ---------- Tokens ---------- */
:root {
  --ink: #062526;
  --sky: #a7d2dd;
  --coral: #f47068;
  --coral-eyebrow: #f67d73;
  --teal: #0f606b;
  --cream: #fff4f0;
  --white: #fff;

  --fs-title: min(53.3px, 10.3vw);
  --fs-hero-title: min(50.65px, 10.5vw);
  --fs-qa-title: clamp(28px, 2.96vw, 42.68px);
  --fs-qa-number: clamp(26px, 2.78vw, 40px);
  --fs-subtitle: clamp(20px, 1.85vw, 26.67px);
  --fs-eyebrow: clamp(16px, 1.67vw, 24px);
  --fs-body: clamp(16px, 1.48vw, 21.34px);
  --fs-button: clamp(17px, 1.72vw, 24.8px);

  --radius-photo: clamp(28px, 2.8vw, 40px);
  --text-left: max(16px, 50% - 613px);
}

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

body {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-size: var(--fs-body);
  /* Canva's "regular" Montserrat renders like Google's 500. */
  font-weight: 500;
  line-height: 1.36;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
ul,
figure {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* The <picture> wrapper from the responsiveImage shortcode must not affect layout. */
picture {
  display: contents;
}

picture > source {
  display: none;
}

a {
  color: inherit;
  text-decoration-thickness: initial;
    text-decoration-style: initial;
    text-decoration-color: initial;
  }
  
  a.btn {
  text-decoration: none;
}

b {
  font-weight: 700;
}

section {
  overflow: hidden;
}

/* Canva's hard line breaks only fit the full desktop width. */
@media (max-width: 1280px) {
  section p br,
  .hero__title br,
  .video__title br,
  .qa__title br,
  .qa__heading br {
    display: none;
  }
}

/* The worksheet and strategy-call titles keep Canva's breaks on phones, but not in between. */
@media (min-width: 801px) and (max-width: 1280px) {
  .promo__title br {
    display: none;
  }
}

/* Google's Montserrat 500 is ~0.5% wider than Canva's regular, so the answer lines, which Canva broke
   by hand to fill 1170px, need a hair of negative tracking to keep those breaks at 1440px. */
@media (max-width: 1399px) {
  .qa br {
    display: none;
  }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 74px;
  padding: 0 clamp(24px, 3vw, 40px);
  border: 3px solid var(--ink);
  border-radius: 999px;
  color: var(--white);
  font-size: var(--fs-button);
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
}

.btn--teal {
  background: var(--teal);
}

.btn--coral {
  background: var(--coral);
}

/* ---------- Hero ---------- */
.hero {
  background: var(--ink);
  color: var(--white);
  padding: 47px 0 71px;
}

.hero__body {
  display: grid;
  grid-template-columns: minmax(0, 441fr) minmax(0, 776fr);
  column-gap: clamp(32px, 3.4vw, 49px);
  align-items: start;
  width: min(1266px, 100% - 32px);
  margin-inline: auto;
}

.hero__photo {
  margin-top: 81px;
}

.hero__photo img {
  width: 100%;
  aspect-ratio: 441 / 394;
  object-fit: cover;
  object-position: 49% 50%;
  border-radius: var(--radius-photo);
}

.hero__eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: .036em;
  line-height: 1.375;
  text-transform: uppercase;
  color: var(--coral);
}

.hero__title {
  margin-top: 34px;
  font-size: var(--fs-hero-title);
  font-weight: 900;
  line-height: .93;
  text-transform: uppercase;
  color: var(--cream);
}

.hero__subtitle {
  margin-top: 22px;
  font-size: var(--fs-subtitle);
  font-weight: 700;
  line-height: 1.39;
}

.hero__lead {
  margin-top: 14px;
}

.hero__lead + .hero__lead {
  margin-top: 29px;
}

@media (max-width: 800px) {
  .hero {
    padding: 24px 0 56px;
  }

  .hero__body {
    grid-template-columns: minmax(0, 560px);
    justify-content: center;
    row-gap: 24px;
  }

  .hero__photo {
    margin-top: 0;
  }

  .hero__title {
    margin-top: 20px;
  }
}

/* ---------- Promo sections (cheat sheet, worksheet, strategy call, rug pull) ---------- */
.promo__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 496px);
  column-gap: 32px;
  align-items: center;
  width: min(1296px, 100% - 32px);
  margin-inline: auto;
}

.promo__heading {
  display: flex;
  align-items: center;
  gap: 16px;
}

.promo__eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  line-height: 1.375;
  text-transform: uppercase;
  color: var(--coral-eyebrow);
}

.promo__title {
  font-size: var(--fs-title);
  font-weight: 900;
  line-height: 1.09;
  color: #082b32;
}

.promo__lead {
  font-size: var(--fs-subtitle);
  line-height: 1.39;
  color: #082b32;
}

.promo__text .btn {
  margin-left: 14px;
}

.promo__visual {
  position: relative;
}

.promo__visual img {
  position: absolute;
  height: auto;
}

/* Cheat sheet: icons, an email field with its button, a mint blob with a phone and a coin stack. */
.promo--cheat-sheet {
  padding: 0;
}

.promo--cheat-sheet .promo__body {
  grid-template-columns: minmax(0, 1fr) minmax(0, min(636px, 50%));
  align-items: center;
}

.promo--cheat-sheet .promo__text {
  padding-left: 12px;
}

.promo--cheat-sheet .promo__icon {
  width: 126px;
  margin-left: -13px;
}

.promo--cheat-sheet .promo__title {
  margin-top: 19px;
}

.promo--cheat-sheet .promo__lead {
  margin-top: 13px;
}

.promo__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 46px;
}

.promo__field {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 0 0 297px;
  height: 64px;
  margin-left: 2px;
  padding: 0 24px;
  border: 1px solid #d8d3d1;
  border-radius: 999px;
  background: #fefefe;
  box-shadow: 0 1px 4px rgb(0 0 0 / .1);
  font-family: "Inter", "Montserrat", sans-serif;
  font-size: var(--fs-body);
  color: #737373;
}

.promo__field img {
  width: 46px;
  margin: 0 -10px;
  flex: none;
  position: static;
}

.promo__form .btn {
  flex: 0 0 392px;
  margin: 0 0 0 -1px;
  padding: 0 12px;
  white-space: nowrap;
}

/* At full desktop width the button runs on towards the picture, as in Canva. */
@media (min-width: 1281px) {
  .promo__form {
    position: relative;
    z-index: 1;
    flex-wrap: nowrap;
    width: 692px;
  }
}

.promo__note {
  margin: 8px 0 0 10px;
  font-size: clamp(14px, 1.27vw, 18.3px);
  color: #082b32;
}

.promo__visual--cheat-sheet {
  aspect-ratio: 518 / 554;
  width: calc(100% - min(8.2vw, 118px));
  justify-self: start;
}

.promo__visual--cheat-sheet .promo__blob {
  left: 21.6%;
  top: 6%;
  width: 78.4%;
}

.promo__visual--cheat-sheet .promo__main {
  left: 0;
  top: -1.4%;
  width: 87.6%;
}

.promo__visual--cheat-sheet .promo__extra {
  left: 56.4%;
  top: 52.9%;
  width: 28.8%;
}

/* Worksheet: a pencil on a sky circle, a coral blob with a folder. */
.promo--worksheet {
  padding: 0;
}

.promo--worksheet .promo__body {
  grid-template-columns: minmax(0, 1fr) minmax(0, min(681px, 53%));
}

.promo--worksheet .promo__text,
.promo--rug-pull .promo__text {
  padding-left: 24px;
}

.promo--worksheet .promo__heading,
.promo--strategy-call .promo__heading,
.promo--rug-pull .promo__heading {
  position: relative;
  min-height: 94px;
}

.promo--worksheet .promo__icon--circle,
.promo--strategy-call .promo__icon--circle,
.promo--rug-pull .promo__icon--circle {
  position: relative;
  width: 84px;
  margin-left: 4px;
}

.promo--worksheet .promo__icon--pencil,
.promo--rug-pull .promo__icon--pencil {
  position: absolute;
  left: 21px;
  top: 14px;
  width: 59px;
}

.promo--worksheet .promo__title {
  margin-top: 4px;
}

.promo--worksheet .promo__lead {
  margin-top: 14px;
  max-width: 613px;
}

.promo--worksheet .btn {
  margin-top: 40px;
  min-width: min(440px, 100%);
}

.promo__visual--worksheet {
  aspect-ratio: 681 / 605;
  width: min(681px, 100%);
  justify-self: start;
  margin-right: calc(-1 * min(56px, 3.9vw));
  margin-block: -10px;
}

.promo__visual--worksheet .promo__blob {
  left: 26.6%;
  top: 18.3%;
  width: 58.3%;
}

.promo__visual--worksheet .promo__main {
  left: 0;
  top: 0;
  width: 100%;
}

/* Strategy call: chat icon on a sky circle, a laptop with a mug. */
.promo--strategy-call {
  padding: 36px 0 37px;
}

.promo--strategy-call .promo__body {
  grid-template-columns: minmax(0, 1fr) minmax(0, min(553px, 44%));
  align-items: start;
}

.promo--strategy-call .promo__text {
  padding-left: 24px;
}

.promo--strategy-call .promo__icon--circle {
  width: 98px;
}

.promo--strategy-call .promo__icon--chat {
  position: absolute;
  left: 8px;
  top: 14px;
  width: 89px;
}

.promo--strategy-call .promo__heading {
  min-height: 108px;
}

.promo--strategy-call .promo__eyebrow {
  margin-left: 4px;
}

.promo--strategy-call .promo__title {
  margin-top: -9px;
}

.promo--strategy-call .promo__lead {
  margin-top: 9px;
  max-width: 671px;
}

.promo--strategy-call .promo__lead + .promo__lead {
  margin-top: 37px;
}

.promo--strategy-call .btn {
  margin-top: 16px;
  min-width: min(345px, 100%);
}

.promo--wallets {
  padding-bottom: 5px;
}

.promo--wallets .btn {
  margin-top: 22px;
}

.promo__visual--strategy-call {
  aspect-ratio: 539 / 469;
  width: min(539px, 100%);
  margin-top: 27px;
}

.promo__visual--strategy-call .promo__blob {
  left: 8%;
  top: 0;
  width: 81.4%;
}

.promo__visual--strategy-call .promo__main {
  left: 0;
  top: 10.2%;
  width: 92.4%;
}

.promo__visual--strategy-call .promo__extra {
  left: 42.1%;
  top: 55.6%;
  width: 57.9%;
}

/* Rug pull guide: pencil on a sky circle, a watercolour stripe with the guide on a tablet. */
.promo--rug-pull {
  padding: 0;
}

.promo--rug-pull .promo__body {
  grid-template-columns: minmax(0, 1fr) minmax(0, min(632px, 49%));
  align-items: start;
}

.promo--rug-pull .promo__text {
  padding-block: 45px 62px;
}

.promo--rug-pull .promo__eyebrow {
  margin-left: 6px;
}

.promo--rug-pull .promo__title {
  margin-top: -4px;
}

/* Both titles run on across the picture beside them at full desktop width. */
@media (min-width: 1281px) {
  .promo--worksheet .promo__title,
  .promo--rug-pull .promo__title {
    position: relative;
    z-index: 1;
    white-space: nowrap;
  }

  .promo--rug-pull .promo__lead {
    width: 658px;
    max-width: none;
  }
}

.promo--rug-pull .promo__lead {
  max-width: 658px;
}

.promo--rug-pull .promo__title + .promo__lead {
  margin-top: 17px;
}

.promo--rug-pull .btn {
  margin-top: 54px;
  min-width: min(396px, 100%);
}

.promo__visual--rug-pull {
  aspect-ratio: 632 / 585;
  width: 100%;
}

.promo__visual--rug-pull .promo__blob {
  left: 1.1%;
  top: 30.6%;
  width: 97%;
}

.promo__visual--rug-pull .promo__main {
  left: 0;
  top: 27.4%;
  width: 96%;
}

@media (max-width: 800px) {
  .promo__body {
    grid-template-columns: minmax(0, 560px) !important;
    justify-content: center;
    row-gap: 24px;
  }

  .promo__heading {
    gap: 10px;
  }

  .promo__text,
  .promo--worksheet .promo__text,
  .promo--strategy-call .promo__text,
  .promo--rug-pull .promo__text {
    padding: 0;
  }

  .promo__text .btn {
    margin-left: 8px;
    max-width: 100%;
  }

  .promo--cheat-sheet,
  .promo--worksheet,
  .promo--strategy-call,
  .promo--rug-pull {
    min-height: 0;
    padding: 26px 0 28px;
  }

  .promo--cheat-sheet .promo__icon {
    width: 101px;
    margin-left: 0;
  }

  .promo--cheat-sheet .promo__title {
    margin-top: 10px;
  }

  .promo--worksheet .promo__icon--circle,
  .promo--rug-pull .promo__icon--circle {
    width: 68px;
    margin-left: 0;
  }

  .promo--worksheet .promo__title,
  .promo--strategy-call .promo__title {
    font-size: min(53.3px, 7.6vw);
  }

  .promo--worksheet .promo__title br,
  .promo--strategy-call .promo__title br {
    display: none;
  }

  .promo__text .btn {
    min-width: 0;
    width: min(350px, 100%);
    min-height: 66px;
  }

  .promo--worksheet .promo__icon--pencil,
  .promo--rug-pull .promo__icon--pencil {
    left: 13px;
    top: 11px;
    width: 47px;
  }

  .promo--strategy-call .promo__heading {
    min-height: 80px;
  }

  .promo--strategy-call .promo__icon--circle {
    width: 53px;
  }

  .promo--strategy-call .promo__icon--chat {
    left: 7px;
    top: 10px;
    width: 48px;
  }

  .promo--strategy-call .promo__eyebrow {
    font-size: 14px;
  }

  .promo--strategy-call .promo__title {
    margin-top: 0;
  }

  .promo--strategy-call .promo__lead + .promo__lead {
    margin-top: 20px;
  }

  .promo--worksheet .promo__heading,
  .promo--rug-pull .promo__heading {
    min-height: 75px;
  }

  .promo--rug-pull .promo__text {
    padding-block: 0;
  }

  .promo--rug-pull .btn {
    margin-top: 28px;
  }

  /* Email field and button share one row on phones. */
  .promo__form {
    flex-wrap: nowrap;
    margin-top: 28px;
  }

  .promo__field {
    flex: 0 0 41%;
    height: 48px;
    gap: 8px;
    padding: 0 14px;
    font-size: 12px;
    margin-left: 0;
  }

  .promo__field img {
    width: 28px;
    margin: 0 -6px;
  }

  .promo__form .btn {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    margin-left: -1px;
    min-height: 46px;
    padding: 0 6px;
    font-size: clamp(10px, 3.1vw, 17px);
  }

  .promo__note {
    margin-left: 4px;
  }

  .promo__visual--cheat-sheet {
    aspect-ratio: 357 / 366;
    margin-right: 0;
  }

  .promo__visual--cheat-sheet .promo__blob {
    left: 4.5%;
    top: 6.6%;
    width: 91%;
  }

  .promo__visual--cheat-sheet .promo__main {
    left: -15.7%;
    top: 0;
    width: 81.8%;
  }

  .promo__visual--cheat-sheet .promo__extra {
    left: 41.5%;
    top: 46.2%;
    width: 32.5%;
  }

  /* Canva's folder picture is 549px wide and runs off both edges of the phone. */
  .promo__visual--worksheet {
    margin: -60px 0 0 calc((100% - 549px) / 2);
    aspect-ratio: 681 / 605;
    width: 549px;
    max-width: none;
  }

  .promo__visual--strategy-call {
    margin-top: 0;
  }

  .promo__visual--rug-pull {
    aspect-ratio: 632 / 585;
    margin-top: -12px;
  }
}

/* ---------- On this page ---------- */
.toc {
  background: var(--sky);
  padding: 55px 0 52px;
}

.toc__body {
  width: min(1296px, 100% - 32px);
  margin-inline: auto;
}

.toc__heading {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: -4px;
}

.toc__icon {
  width: 104px;
  flex: none;
}

.toc__title {
  font-size: var(--fs-title);
  font-weight: 900;
  line-height: 1.09;
  color: #082b32;
}

.toc__list {
  margin: 26px 0 0 11px;
  font-size: var(--fs-subtitle);
  line-height: 1.39;
  color: #082b32;
}

@media (max-width: 800px) {
  .toc {
    padding: 45px 0 50px;
  }

  .toc__heading {
    flex-direction: column;
    gap: 8px;
    margin-left: 0;
  }

  .toc__icon {
    width: 83px;
  }

  .toc__title {
    text-align: center;
  }

  .toc__list {
    margin: 12px 0 0 3px;
  }
}

/* ---------- Questions and answers on ink ---------- */
.qa {
  background: var(--ink);
  color: var(--white);
  padding: 40px 0 0;
  letter-spacing: -.008em;
}

.qa__body {
  width: min(1170px, 100% - 32px);
  margin-left: var(--text-left);
}

.qa__body:last-child {
  padding-bottom: 69px;
}

.qa--q3 .qa__body:last-child {
  padding-bottom: 43px;
}

.qa--q4 .qa__body:last-child {
  padding-bottom: 60px;
}

.qa__title {
  margin-bottom: 37px;
  color: var(--cream);
}

.qa__number {
  display: block;
  font-size: var(--fs-qa-number);
  font-weight: 500;
  line-height: 1.075;
}

.qa__title b {
  display: block;
  font-size: var(--fs-qa-title);
  font-weight: 900;
  line-height: 1.08;
}

.qa__heading {
  margin-bottom: 8px;
  font-size: var(--fs-qa-title);
  font-weight: 900;
  line-height: 1.08;
  color: var(--cream);
}

.qa__body p + p {
  margin-top: 29px;
}

/* Tax trap card: coral outline, siren and a short warning. */
.trap {
  width: min(1159px, 100%);
  margin-top: 36px;
  padding: 22px 30px 36px;
  border: 4px solid var(--coral);
  border-radius: 50px;
}

.trap__heading {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-left: 4px;
}

.trap__icon {
  width: 39px;
  flex: none;
}

.trap__title {
  font-size: var(--fs-subtitle);
  line-height: 1.39;
  color: var(--white);
}

.trap > p {
  margin-top: 8px;
}

/* ACB infographic with its caption pill. */
.qa__infographic {
  position: relative;
  width: min(918px, 100%);
  margin: 61px auto 25px;
}

.qa__infographic img {
  width: 100%;
}

.qa__infographic figcaption {
  position: absolute;
  left: 8px;
  bottom: 11px;
  max-width: calc(100% - 16px);
  padding: 7px;
  border-radius: 18px;
  background: var(--ink);
  font-size: clamp(11px, 1.11vw, 16px);
  line-height: 1.38;
  color: var(--white);
}

.qa__infographic figcaption a {
  text-decoration: underline;
}

.qa__body p.qa__after {
  margin-top: 0;
}

.qa__body p.qa__after + .trap {
  margin-top: 56px;
}

/* Q5 links to the CRA's T2125 guide. */
.qa__body a {
  text-decoration: underline;
}

/* Sections that end in a video card. */
.qa--q2 .qa__body,
.qa--q5 .qa__body,
.qa--filing .qa__body:first-child,
.qa--scams .qa__body {
  padding-bottom: 0;
}

.qa--filing {
  padding-top: 62px;
}

.qa--filing .qa__body--wide .qa__heading {
  margin-bottom: 2px;
}

.qa--scams {
  padding-top: 62px;
}

.qa__notes {
  width: min(1192px, 100% - 32px);
  margin: 0 0 0 max(16px, 50% - 592px);
  padding-top: 22px;
}

.qa__note + .qa__note {
  margin-top: 21px;
}

.qa__body--carf {
  margin-top: 31px;
  margin-left: max(16px, 50% - 601px);
  padding-bottom: 0;
}

/* ---------- Weekly newsletter ---------- */
.newsletter {
  padding: 49px 0 44px;
  background: var(--ink);
  color: var(--cream);
}

.newsletter__body {
  display: grid;
  grid-template-columns: 1fr minmax(0, 537px);
  align-items: start;
  width: min(1280px, 100% - 32px);
  margin-inline: auto;
}

.newsletter__heading {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  margin-left: -6px;
}

.newsletter__icons {
  position: relative;
  width: 115px;
  height: 100px;
  margin: -6px 0 0 19px;
}

.newsletter__icons img {
  position: absolute;
  height: auto;
}

.newsletter__envelope {
  left: 7px;
  top: 47px;
  width: 58px;
}

.newsletter__coin {
  left: 48px;
  top: 42px;
  width: 53px;
}

.newsletter__sparks {
  left: 85px;
  top: 4px;
  width: 30px;
  rotate: 36.5deg;
}

.newsletter__eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: .027em;
  text-transform: uppercase;
  color: var(--coral);
}

.newsletter h2 {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  margin: 26px 0 0 18px;
  font-size: var(--fs-title);
  font-weight: 900;
  line-height: 1.09;
  white-space: nowrap;
  color: var(--cream);
}

.newsletter__lead {
  margin: 30px 0 0 5px;
  font-size: var(--fs-subtitle);
  line-height: 1.39;
}

.newsletter__form {
  display: flex;
  align-items: center;
  width: min(659px, 100%);
  margin: 40px 0 0 -3px;
}

.newsletter__field {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1;
  min-width: 0;
  height: 63px;
  padding: 0 40px 0 24px;
  border: 1px solid #d8d3d1;
  border-radius: 999px;
  background: #fefefe;
  box-shadow: 0 1px 4px rgb(0 0 0 / .1);
}

.newsletter__field img {
  width: 46px;
  margin: 0 -10px;
  flex: none;
}

.newsletter__field input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  font: inherit;
  font-family: "Inter", "Montserrat", sans-serif;
  font-size: clamp(16px, 1.48vw, 21.3px);
  color: var(--ink);
}

.newsletter__field input::placeholder {
  color: #737373;
}

.newsletter__submit {
  flex: none;
  gap: 16px;
  min-height: 63px;
  width: 331px;
  margin-left: -30px;
  padding: 0 20px 0 36px;
  border: 4px solid var(--ink);
  background: var(--teal);
  font-size: clamp(17px, 1.72vw, 24.8px);
  font-weight: 600;
  white-space: nowrap;
}

/* The arrow is drawn with a CSS mask so it follows the button's text colour. */
.newsletter__submit::after {
  content: "";
  width: 28px;
  height: 14px;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 41 14'%3E%3Cpath d='M0 7h37M31 1.5 38 7l-7 5.5' fill='none' stroke='%23000' stroke-width='4'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 41 14'%3E%3Cpath d='M0 7h37M31 1.5 38 7l-7 5.5' fill='none' stroke='%23000' stroke-width='4'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Canva sets this note in the same dark teal as the section, so it can't be read; it is lightened here. */
.newsletter__note {
  margin: 14px 0 0 5px;
  font-size: clamp(14px, 1.27vw, 18.3px);
  color: var(--sky);
}

/* The laptop mock-up: every part is placed in percent of the figure, text in container units. */
.newsletter__visual {
  position: relative;
  width: min(537px, 100%);
  margin: 117px 0 0 calc(-1 * min(47px, 3.3vw));
  aspect-ratio: 537 / 418;
  container-type: inline-size;
}

.newsletter__visual > *,
.newsletter__visual > picture > img {
  position: absolute;
}

.newsletter__visual img {
  height: auto;
}

.newsletter__blob {
  left: 11.7%;
  top: 0;
  width: 68.5%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #729a9b;
}

.newsletter__laptop {
  left: 0;
  top: 21.05%;
  width: 80.45%;
}

.newsletter__screen-bar {
  left: 21.6%;
  top: 23.7%;
  width: 57%;
  height: 18.4%;
  background: #0b3b40;
}

.newsletter__screen-paper {
  left: 21.6%;
  top: 55.3%;
  width: 52.9%;
  height: 21%;
  border-radius: 6px;
  background: #f7f2ec;
  box-shadow: 0 0 8px rgb(0 0 0 / .08);
}

.newsletter__plant {
  left: 56.8%;
  top: 0;
  width: 43.2%;
}

.newsletter__mug {
  left: 74.3%;
  top: 60.5%;
  width: 25.5%;
}

.newsletter__leaf {
  left: 80.3%;
  top: 68.2%;
  width: 9.9%;
}

.newsletter__visual span {
  line-height: 1.15;
  rotate: -3deg;
  font-family: Arial, "Helvetica Neue", sans-serif;
  letter-spacing: -.02em;
}

.newsletter__date {
  left: 66.1%;
  top: 25.8%;
  font-size: 2.3cqw;
  color: #fff;
}

.newsletter__screen-title {
  left: 26.6%;
  top: 29.9%;
  font-size: 3.33cqw;
  color: #fff;
}

.newsletter__screen-heading {
  left: 34.6%;
  top: 42.3%;
  width: 31.7%;
  font-size: 3.99cqw;
  line-height: 1.1;
  color: #082b32;
}

.newsletter__screen-text {
  left: 24.2%;
  top: 58.1%;
  width: 46.4%;
  font-size: 2.29cqw;
  line-height: 1.3;
  color: #082b32;
}

@media (max-width: 800px) {
  .newsletter {
    padding: 40px 0 48px;
  }

  .newsletter__body {
    grid-template-columns: minmax(0, 560px);
    justify-content: center;
  }

  .newsletter__icons {
    scale: .67;
    transform-origin: 0 0;
    width: 90px;
    height: 67px;
  }

  .newsletter h2 {
    margin: 8px 0 0;
    font-size: min(53.3px, 7.4vw);
    white-space: normal;
    line-height: 1.1;
  }

  .newsletter__lead {
    margin: 20px 0 0;
  }

  .newsletter__form {
    margin: 24px 0 0;
  }

  .newsletter__field {
    height: 52px;
    padding: 0 14px;
    gap: 10px;
  }

  .newsletter__field img {
    width: 30px;
    margin: 0 -6px;
  }

  .newsletter__field input {
    font-size: 14px;
  }

  .newsletter__submit {
    width: 52%;
    min-height: 52px;
    gap: 10px;
    padding: 0 12px;
    font-size: clamp(12px, 3.6vw, 17px);
  }

  .newsletter__visual {
    margin: 28px auto 0;
  }
}

/* The text printed on the laptop screen keeps its line breaks at every width. */
.newsletter__visual span br {
  display: inline;
}

/* ---------- Video cards ---------- */
.video {
  padding: 44px 0 0;
}

.video--light {
  padding: 55px 0 78px;
}

.video:last-child {
  padding-bottom: 55px;
}

.qa--q2 .video:last-child {
  padding-bottom: 75px;
}

.qa--q5 .video:last-child {
  padding: 61px 0 60px;
}

.video + .video {
  padding-top: 48px;
}

.video__title {
  width: min(1210px, 100% - 32px);
  margin: 0 auto 20px;
  font-size: var(--fs-qa-title);
  font-weight: 900;
  line-height: 1.01;
  text-align: center;
  color: var(--cream);
}

.video--light .video__title {
  margin-bottom: 76px;
  color: var(--ink);
}

.qa--q2 .video__title,
.qa--q5 .video__title {
  margin-bottom: 76px;
}

.qa__body + .video .video__title {
  margin-bottom: 51px;
}

.video__card {
  width: min(1210px, 100% - 32px);
  margin-inline: auto;
  padding: 24px;
  border-radius: var(--radius-photo);
  background: var(--white);
}

.video__player {
  display: block;
  width: min(780px, 100%);
  aspect-ratio: 16 / 9;
  margin-inline: auto;
  border: 0;
}

/* The video isn't linked yet: an empty card holds its place. */
.video__player--empty {
  background: transparent;
}

/* Canva spaces the title above each video by hand. */
@media (min-width: 801px) {
  .qa--q2 .qa__body + .video .video__title,
  .qa--q5 .qa__body + .video .video__title {
    margin-bottom: 76px;
  }

  .qa--filing .qa__body--wide:first-child + .video {
    padding-top: 83px;
  }

  .qa--filing .qa__body--wide:first-child + .video .video__title {
    margin-bottom: 74px;
  }

  .qa--filing .qa__body--carf + .video {
    padding-top: 60px;
  }

  .qa--filing .qa__body--carf + .video .video__title {
    margin-bottom: 14px;
  }

  .qa--filing .video:last-child {
    padding-bottom: 73px;
  }

  .qa--scams .qa__body + .video .video__title {
    margin-bottom: 15px;
  }

  .qa--scams .video + .video .video__title {
    margin-bottom: 31px;
  }

  .qa--q2 .qa__title {
    margin-bottom: 45px;
  }
}

@media (max-width: 800px) {
  .qa {
    padding-top: 32px;
  }

  .qa--filing,
  .qa--scams {
    padding-top: 40px;
  }

  .qa__body,
  .qa__body--carf,
  .qa__notes {
    width: min(560px, 100% - 32px);
    margin-inline: auto;
  }

  .qa__body:last-child {
    padding-bottom: 40px;
  }

  .qa__title {
    margin-bottom: 20px;
  }

  .qa__number {
    font-size: min(8.2vw, 36px);
  }

  .qa__title b,
  .qa__heading,
  .video__title {
    font-size: min(8.2vw, 36px);
  }

  .qa__body p + p {
    margin-top: 20px;
  }

  .qa__body p.qa__after + .trap,
  .trap {
    margin-top: 28px;
    padding: 18px 18px 22px;
    border-radius: 36px;
  }

  .trap__icon {
    width: 32px;
  }

  .qa__infographic {
    margin: 32px auto 20px;
  }

  .qa__infographic figcaption {
    padding: 4px 6px;
    font-size: 10px;
  }

  .qa__notes {
    padding-top: 16px;
  }

  .qa__body--carf {
    margin-top: 32px;
  }

  .video,
  .video--light {
    padding: 32px 0 0;
  }

  .video--light {
    padding: 40px 0 48px;
  }

  .video__title,
  .video--light .video__title,
  .qa--q2 .video__title,
  .qa--q5 .video__title,
  .qa__body + .video .video__title {
    width: min(560px, 100% - 32px);
    margin-bottom: 20px;
  }

  .video__card {
    width: min(560px, 100% - 32px);
    padding: 12px;
  }

  /* Canva's phone card is taller than 16:9. */
  .video__player {
    aspect-ratio: 4 / 5;
  }

  .qa--q2 .video:last-child,
  .qa--q5 .video:last-child,
  .video:last-child {
    padding-bottom: 40px;
  }
}