/* SendMagic investor film. Local fonts only. */

:root {
  --ink: #111111;
  --paper: #ffffff;
  --muted: #6a6762;
  --quiet: #8a8680;
  --hair: rgba(17,17,17,.14);
  --gold: #C4A574;
  --coral: #C4896A;
  --ease: cubic-bezier(.22,.61,.36,1);
}

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

html {
  scroll-behavior: smooth;
  background: #000;
}

html.shot { scroll-behavior: auto; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a { color: inherit; text-decoration: none; }

.skip {
  position: absolute;
  left: -999px;
  top: 0;
  background: #111;
  color: #fff;
  padding: 8px 14px;
  z-index: 100;
}
.skip:focus { left: 12px; top: 12px; }

/* ── sticky ── */
.sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  pointer-events: none;
  padding: 28px 40px 0;
}
.sticky .mark {
  pointer-events: auto;
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
}

.gold-label {
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1;
}

/* ── hero ── */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  color: #fff;
  overflow: hidden;
  background: #000;
}
.bleed { position: absolute; inset: 0; }
.bleed img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.crop-leyla { object-position: 38% 55%; }
.crop-daniel { object-position: 48% 22%; }
.crop-school { object-position: 50% 42%; }

.top-shade {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 28%;
  background: linear-gradient(to bottom, rgba(0,0,0,.42), transparent);
  pointer-events: none;
}
.foot-shade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 62%;
  background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.36) 48%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}

.hero-frame {
  position: relative;
  z-index: 3;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 10vh 7.2vw 9vh;
}
.hero h1 {
  font-family: Newsreader, "Times New Roman", serif;
  font-weight: 300;
  font-size: clamp(42px, 5.4vw, 88px);
  letter-spacing: -.028em;
  line-height: 1.04;
  font-feature-settings: "liga", "kern";
  margin-top: 22px;
  max-width: 12em;
  color: #fff;
}
.hero-line {
  margin-top: 28px;
  font-family: Newsreader, serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(18px, 1.7vw, 28px);
  letter-spacing: -.015em;
  color: rgba(255,255,255,.78);
  max-width: 22em;
  line-height: 1.25;
}
.quiet-link {
  display: inline-block;
  margin-top: 36px;
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.58);
  border-bottom: 1px solid rgba(255,255,255,.28);
  padding-bottom: 3px;
}
.quiet-link:hover { color: #fff; border-color: rgba(255,255,255,.7); }

/* ── the line ── */
.line {
  min-height: 88vh;
  display: flex;
  align-items: center;
  padding: 16vh 10vw;
  background: var(--paper);
}
.line p {
  font-family: Newsreader, serif;
  font-weight: 300;
  font-size: clamp(32px, 3.6vw, 58px);
  letter-spacing: -.025em;
  line-height: 1.14;
  max-width: 16em;
  font-feature-settings: "liga", "kern";
}

/* ── product ── */
.product {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 7vw;
  padding: 8vh 8vw;
  background: var(--paper);
}
.product-copy { max-width: 18em; }
.act {
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: clamp(22px, 2.4vw, 38px);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--coral);
  line-height: 1;
}
.follow-word {
  margin-top: .55em;
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: clamp(22px, 2.4vw, 38px);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1;
}
.product-note {
  margin-top: 2.2em;
  font-family: Newsreader, serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(18px, 1.55vw, 26px);
  letter-spacing: -.015em;
  color: var(--muted);
  line-height: 1.25;
  max-width: 12em;
}
.private {
  margin-top: 2.6em;
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--quiet);
}

/* phone */
.phone-wrap {
  width: 298px;
  height: 625px;
  flex-shrink: 0;
}
.phone-wrap .device {
  transform: scale(.72);
  transform-origin: top left;
}

.device {
  width: 414px;
  height: 868px;
  background: #0d0d0e;
  border-radius: 62px;
  padding: 12px;
  position: relative;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.07),
    0 0 0 1px #000,
    0 22px 56px rgba(0,0,0,.16);
}
.hw { position: absolute; background: #2a2a2c; }
.hw-power { right: -2px; top: 196px; width: 3px; height: 72px; border-radius: 1px 2px 2px 1px; }
.hw-silent { left: -2px; top: 168px; width: 3px; height: 28px; border-radius: 2px 1px 1px 2px; }
.hw-vol { left: -2px; top: 212px; width: 3px; height: 56px; border-radius: 2px 1px 1px 2px; }
.hw-vol-dn { left: -2px; top: 278px; width: 3px; height: 56px; border-radius: 2px 1px 1px 2px; }

.screen {
  width: 390px;
  height: 844px;
  border-radius: 50px;
  overflow: hidden;
  background: #111;
  position: relative;
  isolation: isolate;
}
.island {
  position: absolute;
  top: 11px; left: 50%;
  transform: translateX(-50%);
  width: 126px; height: 37px;
  background: #000;
  border-radius: 20px;
  z-index: 30;
  pointer-events: none;
}
.sb {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 54px;
  z-index: 25;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 28px 8px;
  pointer-events: none;
}
.sb-time {
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -.02em;
  width: 54px;
  line-height: 1;
}
.sb-end { display: flex; align-items: center; justify-content: flex-end; width: 72px; }
.sb-end svg { display: block; }
.sb-dark { color: #fff; }
.sb-dark svg { fill: #fff; }
.home {
  position: absolute;
  left: 50%; bottom: 8px;
  transform: translateX(-50%);
  width: 134px; height: 5px;
  border-radius: 99px;
  z-index: 26;
  pointer-events: none;
}
.home-dark { background: #fff; opacity: .62; }

.v-watch { position: absolute; inset: 0; background: #111; }
.still { position: absolute; inset: 0; }
.still img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 36% 48%;
}
.pveil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.42) 28%, rgba(0,0,0,.08) 52%, rgba(0,0,0,.18) 100%);
  pointer-events: none;
}
.topbar {
  position: absolute;
  top: 62px; left: 16px; right: 16px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  height: 36px;
}
.ghost {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.ghost svg { width: 22px; height: 22px; }
.brand {
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}
.play {
  position: absolute;
  left: 50%; top: 44%;
  transform: translate(-50%, -50%);
  width: 72px; height: 72px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  border: 1.5px solid rgba(255,255,255,.72);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  z-index: 4;
}
.play svg { width: 26px; height: 26px; margin-left: 3px; }
.wfoot {
  position: absolute;
  left: 20px; right: 20px; bottom: 0;
  z-index: 4;
  color: #fff;
  padding-bottom: 46px;
}
.wfoot .kicker {
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
}
.wfoot h3 {
  font-family: Newsreader, serif;
  font-weight: 400;
  font-size: 28px;
  letter-spacing: -.025em;
  line-height: 1.08;
  margin: 10px 0 8px;
  max-width: 12em;
}
.wfoot .who {
  font-family: Inter, sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,.72);
}
.wfoot .see {
  margin: 6px 0 14px;
  font-family: Inter, sans-serif;
  font-size: 12px;
  color: rgba(255,255,255,.62);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pair { display: flex; gap: 8px; }
.btn-send {
  background: var(--coral);
  color: #fff;
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  height: 48px;
  border-radius: 99px;
  display: flex; align-items: center; justify-content: center;
  flex: 1.25;
}
.btn-follow {
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  height: 48px;
  border-radius: 99px;
  display: flex; align-items: center; justify-content: center;
  flex: 1;
  border: 1.5px solid rgba(255,255,255,.85);
  color: #fff;
  background: transparent;
}
.illus {
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(196,165,116,.85);
  text-align: center;
  margin-top: 10px;
}

/* ── journey ── */
.journey {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12vh 8vw;
  background: var(--paper);
}
.journey ol {
  list-style: none;
  width: min(46vw, 880px);
}
.journey li {
  font-family: Newsreader, serif;
  font-weight: 300;
  font-size: clamp(36px, 3.6vw, 62px);
  letter-spacing: -.028em;
  line-height: 1;
  padding: 1.4vh 0;
  font-feature-settings: "liga", "kern";
}
.journey li + li { border-top: 1px solid var(--hair); }
.quiet-line {
  margin-top: 2.4em;
  font-family: Newsreader, serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(18px, 1.45vw, 24px);
  letter-spacing: -.01em;
  color: var(--muted);
}

/* ── doors ── */
.doors {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.4vw;
  align-items: center;
  padding: 10vh 4.4vw;
  background: #000;
}
.doors figure { margin: 0; }
.door-still {
  width: 100%;
  height: 68vh;
  overflow: hidden;
  background: #111;
}
.door-still img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.doors figcaption {
  margin-top: 1.15em;
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ── trust ── */
.trust {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12vh 8vw;
  background: var(--paper);
}
.trust ol {
  list-style: none;
  width: min(52vw, 920px);
}
.trust li {
  font-family: Newsreader, serif;
  font-weight: 300;
  font-size: clamp(36px, 3.5vw, 58px);
  letter-spacing: -.026em;
  line-height: 1;
  padding: 1.5vh 0;
  font-feature-settings: "liga", "kern";
}
.trust li + li { border-top: 1px solid var(--hair); }
.trust-body {
  margin-top: 2.6em;
  font-family: Newsreader, serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(20px, 1.7vw, 28px);
  letter-spacing: -.015em;
  color: var(--muted);
  max-width: 18em;
  line-height: 1.25;
}
.trust-body.last { margin-top: .55em; }

/* ── why ── */
.why {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12vh;
  padding: 12vh 8vw;
  background: var(--paper);
}
.why p {
  font-family: Newsreader, serif;
  font-weight: 300;
  font-size: clamp(28px, 2.85vw, 46px);
  letter-spacing: -.022em;
  line-height: 1.16;
  max-width: 16em;
  font-feature-settings: "liga", "kern";
}

/* ── close ── */
.close {
  min-height: 100vh;
  min-height: 100dvh;
  background: #000;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 14vh 7.2vw 12vh;
  position: relative;
}
.close h2 {
  font-family: Newsreader, serif;
  font-weight: 300;
  font-size: clamp(40px, 4.6vw, 76px);
  letter-spacing: -.028em;
  line-height: 1.06;
  max-width: 11em;
  font-feature-settings: "liga", "kern";
}
.close-mark { margin-top: 2.2em; }
.talk {
  display: inline-block;
  margin-top: 3.2em;
  align-self: flex-start;
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .08em;
  color: rgba(255,255,255,.78);
  border-bottom: 1px solid rgba(196,165,116,.7);
  padding-bottom: 4px;
}
.talk:hover { color: #fff; border-color: var(--gold); }
.close-foot {
  position: absolute;
  left: 7.2vw;
  bottom: 7vh;
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.38);
}

/* ── phone ── */
@media (max-width: 980px) {
  .sticky { padding: 20px 22px 0; }
  .hero-frame { padding: 12vh 7vw 8vh; }
  .line { min-height: 72vh; padding: 14vh 7vw; }
  .product {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 10vh 7vw 12vh;
    justify-items: start;
  }
  .phone-wrap { margin-top: 48px; }
  .journey { min-height: auto; padding: 12vh 7vw; }
  .journey ol { width: 100%; }
  .doors {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 8vh 7vw;
    gap: 28px;
  }
  .door-still { height: 52vh; }
  .trust, .why, .close {
    min-height: auto;
    padding: 14vh 7vw;
  }
  .trust ol { width: 100%; }
  .why { gap: 8vh; }
  .close { min-height: 100vh; min-height: 100dvh; }
  .close-foot { left: 7vw; }
}

@media (max-width: 420px) {
  .phone-wrap {
    width: 248px;
    height: 520px;
  }
  .phone-wrap .device { transform: scale(.6); }
}


/* Capture isolation: one section fills the 1440x900 frame. */
html.shot-hero section:not(#hero),
html.shot-product section:not(#product),
html.shot-mid section:not(#doors),
html.shot-close section:not(#close) {
  display: none !important;
}
html.shot .skip { display: none !important; }
html.shot-product .product,
html.shot-mid .doors,
html.shot-close .close,
html.shot-hero .hero {
  min-height: 100vh;
  min-height: 100dvh;
}