/* ============================================================
   canUSD — landing v2
   Design source: Figma GCBC5kYBn2pm2CF0FiGufq, node 30:528
   ============================================================ */

:root {
  /* palette */
  --cream:  #eae9e0;
  --plum:   #39303e;
  --plum-2: #32303e;
  --blue:   #283e51;
  --teal:   #285150;
  --gray:   #969696;
  --ink:    #2d2d2d;

  /* fonts */
  --serif: "Baskervville", Georgia, serif;
  --sans:  "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --mono:  "Roboto Mono", ui-monospace, monospace;

  /* type scale (Figma @1280) */
  --fs-h1:        clamp(44px, 5.6vw, 72px);
  --fs-h2:        clamp(34px, 3.75vw, 48px);
  --fs-statement: clamp(28px, 3.75vw, 48px);
  --fs-card:      clamp(24px, 2.5vw, 32px);
  --fs-body:      20px;
  --fs-link:      18px;
  --fs-label:     14px;
  --fs-legal:     13px;

  /* layout */
  --pad: 32px;
  --col-2: 66.5625%;   /* 852 / 1280 */
  --col-mid: 34.53%;   /* 442 / 1280 */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.33;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

img { display: block; }
a { color: inherit; }

h1, h2 { font-weight: 500; }

.dim  { color: var(--gray); }
.ink  { color: var(--plum); }
.lite { color: var(--cream); }

/* arrow drawn to match Instrument Sans stroke (the font has no U+2192) */
.arrowed::after {
  content: "";
  display: inline-block;
  width: 19px;
  height: 12px;
  margin-left: 12px;
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 12"><path d="M0 6h18.2M13.2 1l5 5-5 5" fill="none" stroke="black" stroke-width="1.5"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 12"><path d="M0 6h18.2M13.2 1l5 5-5 5" fill="none" stroke="black" stroke-width="1.5"/></svg>') center / contain no-repeat;
}
a.arrowed::after { vertical-align: -1px; }

.btn {
  display: inline-flex;
  align-items: center;
  height: 46px;
  padding: 0 21px 2px;
  border: 0;
  border-radius: 4px;
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  white-space: pre;
  transition: opacity .2s ease;
}
.btn:hover { opacity: .85; }
.btn--light { background: var(--cream); color: var(--ink); }
.btn--dark  { background: var(--ink);  color: var(--cream); }

/* ============ HERO ============ */

.hero {
  position: relative;
  min-height: 929px;
  background: var(--plum);
  color: var(--cream);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 12-col grid: right column = 4 cols = exactly one third of content */
.hero__bar {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: start;
  padding: var(--pad);
}

/* one logo size across desktop and mobile */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.brand__mark { width: 28px; height: 28px; }
.brand__word {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 1.7px;
  line-height: 1;
}

.hero__links {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 24px;
}
.hero__links a {
  font-size: var(--fs-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  width: fit-content;
  white-space: nowrap;
}
.hero__links a:hover { color: #fff; }

.hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 2fr 1fr;
  padding: 0 var(--pad);
  /* text blocks sit 80px above the animated image
     (+12px compensates the H1 descender overflowing its line box) */
  margin-top: auto;
  margin-bottom: calc(463px + 80px + 12px);
}

.hero__title {
  font-family: var(--serif);
  font-size: var(--fs-h1);
  line-height: .9;
  letter-spacing: -0.01em;
  padding-right: 40px;
}

.hero__aside {
  min-width: 0;
  padding: 4px 40px 4px 0;  /* 4px vertical: optical alignment with the title */
  /* stretch to the title height: lede tracks the first line's
     x-height, the link sits on the last line's baseline */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}
.hero__lede {
  color: var(--gray);
  margin-top: 16px;   /* optical: top of text at H1 first-line x-height */
  padding-right: 24px; /* keeps the lede at three lines */
}
.hero__cta {
  display: inline-block;
  font-size: var(--fs-link);
  color: var(--cream);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  white-space: pre;
  margin-bottom: -4px; /* optical: baseline on H1 last-line baseline */
}
.hero__cta:hover { color: #fff; }

.hero__fx {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 463px;
  z-index: 1;
}

/* ============ STATEMENT ============ */

.statement {
  position: relative;
  min-height: 677px;  /* ~+25% gap between text and note */
  background: var(--cream);
  padding: 36px var(--pad) 102px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 64px;
}
.statement__text {
  font-size: var(--fs-statement);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--plum);
}
/* scroll-driven tint: letters flip gray -> ink with a crisp edge */
.statement__text .sw { white-space: nowrap; }
.statement__text .sl {
  color: var(--gray);
  transition: color .12s linear;
}
.statement__text .sl.on { color: var(--plum); }
.statement__note {
  align-self: flex-end;
  width: calc(100% / 3);
  color: var(--plum-2);
  padding-right: 16px;
  box-sizing: border-box;
}

/* ============ PILLARS (What canUSD is) ============ */

.pillars {
  min-height: 664px;
  background: var(--blue);
  color: var(--cream);
  padding: 55px var(--pad) 72px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 64px;
}
.pillars__title,
.integrate__title,
.faq__title {
  font-family: var(--serif);
  font-size: var(--fs-h2);
  line-height: .9;
  letter-spacing: -0.01em;
}
/* columns sit exactly on the 12-col grid (thirds); the gutter is
   an inner right padding that also compresses the text block */
.pillars__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.pillar {
  min-width: 0;
  padding-right: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.pillar h3 {
  font-size: var(--fs-card);
  font-weight: 400;
  line-height: 1.33;
}
.pillar p { color: var(--gray); }
.pillar--ink h3 { color: var(--plum-2); }

/* ============ CTA / WATER ============ */

.cta {
  position: relative;
  min-height: 603px;
  background: var(--gray);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cta__fx {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.cta__content {
  position: relative;
  z-index: 2;
  width: 573px;
  max-width: calc(100% - 2 * var(--pad));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
  padding: 48px 0;
}
.cta__text {
  font-size: var(--fs-statement);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--cream);
  white-space: nowrap;  /* two lines exactly, split by the <br> */
}

/* ============ INTEGRATE ============ */

.integrate {
  min-height: 696px;
  background: var(--cream);
  padding: 55px var(--pad) 111px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 64px;
}
.integrate__title { color: var(--ink); }
.integrate__row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-left: calc(100% / 3);
}

/* ============ FAQ ============ */

.faq {
  min-height: 637px;
  background: var(--teal);
  color: var(--cream);
  padding: 55px var(--pad) 72px;
  display: flex;
}
.faq__title { flex: 0 0 auto; width: calc(100% / 3); padding-right: 16px; }
.faq__list { flex: 1 1 auto; min-width: 0; }

.faq__item {
  border-top: 1px solid rgba(234, 233, 224, .5);
  padding: 24px 0;
}
.faq__item summary {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary > span:first-child {
  flex: 1 0 0;
  min-width: 0;
  font-size: var(--fs-card);
  line-height: 1.33;
}
.faq__icon {
  position: relative;
  flex: 0 0 auto;
  width: 43px;
  height: 43px;
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: var(--cream);
  transition: transform .42s cubic-bezier(.4, 0, .2, 1);
}
.faq__icon::before { width: 21px; height: 1.5px; transform: translate(-50%, -50%); }
.faq__icon::after  { width: 1.5px; height: 21px; transform: translate(-50%, -50%); }
.faq__item.is-open .faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item.is-open .faq__icon::before { transform: translate(-50%, -50%) rotate(180deg); }

.faq__answer {
  color: var(--gray);
  overflow: hidden;
}
.faq__answer-inner {
  padding: 16px 48px 20px 0;
}

/* ============ WAITLIST ============ */

.waitlist {
  min-height: 608px;
  background: var(--cream);
  padding: 46px var(--pad) 72px;
  display: flex;
  justify-content: space-between;
  gap: 48px;
}
.waitlist__title {
  font-family: var(--serif);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: .9;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 703px;
}
.waitlist__form {
  width: calc(100% / 3);
  min-width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;  /* room for the error line, layout never shifts */
}

.field {
  position: relative;
  display: block;
  height: 64px;
  padding: 0;
  border-bottom: 1px solid rgba(0, 0, 0, .4);
  transition: border-color .2s ease;
  cursor: text;
}
.field:hover { border-bottom-color: rgba(0, 0, 0, .75); }
.field:focus-within { border-bottom-color: var(--ink); }
.field.invalid { border-bottom-color: #8c2f2f; }
.field.invalid .field__label { color: #8c2f2f; }
.field.invalid::after { background: #8c2f2f; transform: scaleX(1); }

.field__error {
  position: absolute;    /* lives in the gap below the rule */
  left: 0;
  top: calc(100% + 5px);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #8c2f2f;
  display: none;
}
.field.invalid .field__error { display: block; }

/* thicker underline sweeping in on focus */
.field::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
.field:focus-within::after { transform: scaleX(1); }

.field__label {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: var(--fs-label);
  line-height: .9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: rgba(23, 23, 23, .6);
  pointer-events: none;
  transition: top .28s cubic-bezier(.4, 0, .2, 1),
              transform .28s cubic-bezier(.4, 0, .2, 1),
              font-size .28s cubic-bezier(.4, 0, .2, 1),
              color .2s ease;
}
.field__input {
  border: 0;
  background: transparent;
  font-family: var(--sans);
  font-size: 18px;
  color: var(--ink);
  outline: none;
  width: 100%;
  height: 100%;
  padding-top: 18px;
}
.field__input:focus + .field__label,
.field__input:not(:placeholder-shown) + .field__label {
  top: 10px;
  transform: none;
  font-size: 11px;
}
.field__input:focus + .field__label { color: rgba(23, 23, 23, .85); }

.waitlist__submit {
  margin-top: 8px;
  justify-content: center;
  transition: background .3s ease, color .3s ease;
}
.waitlist__submit.success {
  background: var(--teal);
  color: var(--cream);
  pointer-events: none;
}
.waitlist__submit.success::after { display: none; }
.waitlist__success {
  font-size: 14px;
  color: var(--teal);
  text-align: center;
}

/* ============ FOOTER ============ */

.footer {
  position: relative;
  min-height: 218px;
  background: var(--gray);
  color: #fff;
  padding: 33px var(--pad);
  display: flex;
  justify-content: space-between;
  gap: 48px;
}
.footer__left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  max-width: 702px;
}
.footer__legal {
  font-size: var(--fs-legal);
  line-height: 1.5;
}
.footer__links {
  display: flex;
  flex-direction: row;
  gap: 32px;
  align-items: flex-start;
}
.footer__links a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  white-space: nowrap;
}
.footer__links a:hover { opacity: .8; }

/* ============ FX (video shader) ============ */

.fx canvas,
.fx video.fx__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fx__plus {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 10;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .45);
  background: rgba(0, 0, 0, .25);
  cursor: pointer;
  padding: 0;
  transition: transform .25s ease, background .2s ease;
}
.fx__plus::before,
.fx__plus::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: rgba(255, 255, 255, .85);
}
.fx__plus::before { width: 11px; height: 1px; transform: translate(-50%, -50%); }
.fx__plus::after  { width: 1px; height: 11px; transform: translate(-50%, -50%); }
.fx__plus:hover { background: rgba(0, 0, 0, .45); }
.fx__plus[aria-expanded="true"] { transform: rotate(45deg); }

.fx__panel {
  position: absolute;
  right: 12px;
  bottom: 52px;
  z-index: 11;
  width: 224px;
  padding: 14px 14px 12px;
  border-radius: 6px;
  background: rgba(10, 10, 12, .82);
  backdrop-filter: blur(6px);
  color: var(--cream);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .02em;
  display: none;
}
.fx__panel.open { display: block; }

.fx__row { margin-bottom: 10px; }
.fx__row label {
  display: flex;
  justify-content: space-between;
  text-transform: uppercase;
  color: rgba(234, 233, 224, .65);
  margin-bottom: 4px;
}
.fx__row output { color: var(--cream); }

.fx__row input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 14px;
  background: transparent;
  cursor: pointer;
}
.fx__row input[type="range"]::-webkit-slider-runnable-track {
  height: 2px;
  background: rgba(234, 233, 224, .3);
}
.fx__row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--cream);
  margin-top: -4px;
}
.fx__row input[type="range"]::-moz-range-track {
  height: 2px;
  background: rgba(234, 233, 224, .3);
}
.fx__row input[type="range"]::-moz-range-thumb {
  width: 10px; height: 10px;
  border: 0;
  border-radius: 50%;
  background: var(--cream);
}

.fx__row select {
  width: 100%;
  background: rgba(234, 233, 224, .08);
  color: var(--cream);
  border: 1px solid rgba(234, 233, 224, .25);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 11px;
  padding: 4px 6px;
}

.fx__swatches {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.fx__swatch {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25);
  cursor: pointer;
  padding: 0;
}
.fx__swatch.active {
  outline: 2px solid var(--cream);
  outline-offset: 1px;
}

.fx__load {
  width: 100%;
  background: rgba(234, 233, 224, .08);
  border: 1px solid rgba(234, 233, 224, .25);
  border-radius: 3px;
  color: var(--cream);
  font-family: var(--mono);
  font-size: 11px;
  padding: 5px 0;
  cursor: pointer;
}
.fx__load:hover { border-color: rgba(234, 233, 224, .5); }

.fx__reset {
  width: 100%;
  margin-top: 2px;
  background: transparent;
  border: 1px solid rgba(234, 233, 224, .25);
  border-radius: 3px;
  color: rgba(234, 233, 224, .65);
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  padding: 5px 0;
  cursor: pointer;
}
.fx__reset:hover { color: var(--cream); border-color: rgba(234, 233, 224, .5); }

/* ============ RESPONSIVE ============ */

@media (max-width: 900px) {
  :root {
    --pad: 20px;
    --fs-h1: clamp(28px, 8.8vw, 44px);  /* 33px at 375w, three lines */
    --fs-body: 16px;
    --fs-link: 16px;
  }

  .hero { min-height: 0; padding-bottom: 380px; }
  .hero__grid {
    grid-template-columns: 1fr;
    margin-top: 72px;
    margin-bottom: 64px;
    gap: 32px;
  }
  .hero__title { padding-right: 0; }
  .hero__aside { padding-right: 0; }
  .hero__lede {
    margin-top: 0;
    font-size: 16px;
    /* progressive right padding: the text column stays ~280px wide,
       so the lede holds 2–3 lines on any phone width */
    padding-right: max(0px, calc(100% - 280px));
  }
  .hero__cta { margin-top: 32px; margin-bottom: 0; }
  .hero__links { gap: 32px; justify-content: flex-end; }
  /* mobile keeps only the Contact link */
  .hero__links a:not([href^="mailto"]),
  .footer__links a:not([href^="mailto"]) { display: none; }
  .hero__fx { height: 340px; }

  .statement { min-height: 0; gap: 60px; padding-bottom: 64px; }
  .statement__note { align-self: flex-start; width: 100%; margin-right: 0; }

  .pillars { min-height: 0; gap: 48px; }
  .pillars__row { grid-template-columns: 1fr; gap: 40px; }
  .pillar { padding-right: 0; }

  .cta { min-height: 480px; }
  .cta__text { font-size: 24px; }

  .integrate { min-height: 0; gap: 48px; padding-bottom: 64px; }
  .integrate__row { margin-left: 0; grid-template-columns: 1fr; gap: 40px; }

  .faq { min-height: 0; flex-direction: column; gap: 32px; }
  .faq__title { width: auto; }
  .faq__icon { width: 32px; height: 32px; }

  .waitlist { flex-direction: column; gap: 40px; min-height: 0; }
  .waitlist__form { width: 100%; min-width: 0; }

  .footer { gap: 24px; }
}