/* Landing page for itstixxy.com. Motion lives in landing.js; the hero entrance and the
   button hover are pure CSS so they work before (and without) the script. */

@font-face { font-family: "Manrope"; src: url("/fonts/manrope-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/fonts/manrope-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/fonts/manrope-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/fonts/manrope-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  --paper: #f8f8fa;
  --ink: #111113;
  --muted: #8e8e96;
  --line: #e4e4e9;
  --blue: #1473f8;
  --bubble: #2c2c2e;
  --alternates: "blwf" on, "cv03" on, "cv04" on, "cv09" on, "cv11" on;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

h1, h2, h3, h4, p { margin: 0; }

body {
  margin: 0;
  background: var(--paper);
  color: #000;
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  line-height: 1.2;
}

.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
}

main { display: contents; }

/* Parallax carries each phone out of its own section and across its neighbours. Paint
   order then has to follow document order — a later section's copy sits over a phone
   that drifted down into it — which only holds if these boxes are positioned. */
.hero,
main > section,
.footer,
.copy { position: relative; }

/* ---------- Type ---------- */

.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.2em;
  text-transform: uppercase;
  color: var(--muted);
  font-feature-settings: var(--alternates);
}
.eyebrow-blue { color: var(--blue); }

.display {
  font-size: 76px;
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 0.96em;
  color: var(--ink);
  text-align: center;
  text-wrap: balance;
  font-feature-settings: var(--alternates);
}

.title {
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1em;
  color: var(--ink);
  text-wrap: balance;
  font-feature-settings: var(--alternates);
}

.body {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.5em;
  color: var(--muted);
  text-wrap: balance;
  font-feature-settings: var(--alternates);
}
.body.pretty { text-wrap: pretty; }

.wordmark {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.07em;
  line-height: 1em;
  color: var(--ink);
}
.wordmark-small { font-size: 20px; }

/* ---------- Buttons ---------- */

/* Hovering eases in over 200ms; letting go hands scale back to a spring (stiffness 550,
   damping 30, sampled every 10ms into the linear() below) that dips just under 1 before
   settling, while opacity fades on its own 300ms curve. The transition on the base rule
   is the way *out*, the one under :hover is the way *in*. */
.button {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 100px;
  font: inherit;
  line-height: 1em;
  white-space: pre;
  cursor: pointer;
  will-change: transform;
  transition:
    transform 0.25s cubic-bezier(0.3, 1.25, 0.6, 1),
    opacity 0.3s cubic-bezier(0.25, 0.1, 0.35, 1);
}
@supports (transition-timing-function: linear(0, 1)) {
  .button {
    transition:
      transform 0.25s linear(0, 0.0248, 0.0894, 0.1802, 0.2863, 0.3987, 0.5104, 0.6162, 0.7128, 0.798, 0.8706, 0.9305, 0.9782, 1.0146, 1.0408, 1.0583, 1.0685, 1.0729, 1.0726, 1.069, 1.0631, 1.0557, 1.0476, 1.0393, 1.0313, 1),
      opacity 0.3s cubic-bezier(0.25, 0.1, 0.35, 1);
  }
}
@media (hover: hover) {
  .button:hover {
    opacity: 0.86;
    transform: scale(1.1);
    transition:
      transform 0.2s cubic-bezier(0.2, 0, 0, 1),
      opacity 0.2s cubic-bezier(0.2, 0, 0, 1);
  }
}

.button-dark {
  gap: 9px;
  padding: 13px 20px;
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.button-dark .apple { width: 15.75px; height: 18px; display: block; }

.button-light {
  padding: 14px 22px;
  background: #fff;
  color: var(--blue);
  font-size: 14px;
  font-weight: 800;
}

/* ---------- Hero ---------- */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 54px;
  width: 100%;
  max-width: 1120px;
  padding: 34px 32px 100px;
  overflow: clip;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}
.hero-content .display { width: 100%; }
.hero-sub { width: 620px; max-width: 100%; text-align: center; }

/* ---------- Phones ---------- */

/* The bezel is painted over the screenshot rather than around it, so the image keeps the
   full frame and is cropped by the rounded corners, not inset by the border. */
.phone {
  position: relative;
  flex: none;
  width: 315px;
  height: 560px;
  border-radius: 36px;
  overflow: clip;
  box-shadow: 0 25px 50px #11111324;
  --bezel: 7px;
}
.phone::after {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--bezel) solid var(--ink);
  border-radius: inherit;
  pointer-events: none;
}
.phone img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  object-position: center top;
}

.phone-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 32px;
  background: #fff;
  text-align: center;
}

/* Scroll reveals. landing.js drives the spring; this is only the resting "not yet seen"
   pose, and it applies only once the script has announced itself on <html>. */
[data-reveal] { will-change: transform; }
.js [data-reveal] { opacity: 0; transform: translateY(70px) rotate(5deg); }
.js [data-reveal^="-"] { transform: translateY(70px) rotate(-5deg); }

/* ---------- Feature sections (01, 02, 04) ---------- */

.feature,
.split {
  display: flex;
  align-items: center;
  gap: 76px;
  width: 100%;
  max-width: 1120px;
  padding: 110px 32px;
}

.copy {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  width: 1px;
}
.copy > * { width: 100%; }

/* ---------- 03 The group chat ---------- */

.chat { overflow: clip; }

.thread {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 12px;
  width: 1px;
  padding: 32px 0;
}

/* Drawn as an iMessage thread: a bubble only as wide as what it says, grey on the left
   for everyone else, blue on the right for the one message that reads as yours. */
.message { display: flex; width: 100%; }
.message-reply { justify-content: flex-end; }

.bubble {
  max-width: 82%;
  padding: 14px 22px 16px;
  border-radius: 22px;
  background: var(--bubble);
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.45em;
}
.message-reply .bubble { background: var(--blue); }

.sender {
  margin-bottom: 2px;
  color: #ffffff9e;
  font-size: 14px;
  line-height: 1.45em;
}
.message-reply .sender { color: #ffffffc2; }

/* ---------- Notes comparison (the hero's before and after) ---------- */

.compare-phones {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 76px;
  width: 100%;
  will-change: transform;
  animation: hero-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes hero-in {
  from { opacity: 0.001; transform: translateY(50px); }
  to { opacity: 1; transform: none; }
}

.compare-column {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 315px;
  max-width: 100%;
}
.compare-column > .eyebrow { width: 100%; text-align: center; }

.mock {
  position: relative;
  width: 100%;
  height: 620px;
  overflow: clip;
  border-radius: 36px;
  background: #fff;
}
.mock::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 7px solid var(--ink);
  border-radius: inherit;
  pointer-events: none;
}

/* Both are real screenshots, cropped from the top to the same height so the two phones
   line up whatever each screen happens to show at the bottom. */
.mock img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* ---------- Download ---------- */

.cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: 100%;
  padding: 110px 32px 40px;
  overflow: clip;
  border-radius: 32px 32px 0 0;
  background: var(--blue);
  color: #fff;
  text-align: center;
}
.cta-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1em;
  text-transform: uppercase;
  white-space: pre;
}
.cta-title {
  width: 760px;
  max-width: 100%;
  font-size: 56px;
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 0.98em;
  text-wrap: balance;
}
.cta-body {
  width: 520px;
  max-width: 100%;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5em;
  text-wrap: balance;
}

/* ---------- Footer ---------- */

/* The download section's blue carries on to the bottom of the page as one row of small
   print and links. There is no wordmark here: the nav already carries it. On the landing page the footer has no
   corners of its own because the section above it supplies them; a page without that
   section (privacy) rounds the footer itself with .footer-standalone. */
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: auto;
  padding: 0 32px 32px;
  overflow: clip;
  background: var(--blue);
  color: #fff;
}
.footer-standalone { border-radius: 32px 32px 0 0; padding-top: 48px; }


.footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  width: 100%;
  max-width: 1056px;
  padding-top: 24px;
}
.copyright { font-size: 14px; font-weight: 500; line-height: 1em; color: #ffffffb3; white-space: pre; }

.footer-links { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.footer-links a {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1em;
  text-decoration: none;
  text-underline-offset: 4px;
}
.footer-links a:hover,
.footer-links a:focus-visible { text-decoration: underline; }

/* ---------- Legal pages ---------- */

.legal-nav {
  width: 100%;
  max-width: 1120px;
  padding: 34px 32px 0;
}
.legal-nav a { text-decoration: none; }

.legal {
  display: block;
  width: 100%;
  max-width: 720px;
  padding: 72px 32px 110px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.6;
}
.legal .eyebrow { margin-bottom: 16px; }
.legal .title { margin-bottom: 12px; }
.legal-date { color: var(--muted); margin-bottom: 40px; }
.legal h2 {
  margin: 48px 0 16px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.2em;
}
.legal p + p { margin-top: 16px; }
.legal p + ul, .legal ul + p,
.legal p + ol, .legal ol + p { margin-top: 16px; }
.legal ul, .legal ol { margin: 0; padding-left: 22px; }
.legal li + li { margin-top: 10px; }
.legal li ul { margin-top: 10px; }
.legal li p { margin-top: 12px; }
.legal a { color: var(--blue); text-underline-offset: 3px; }
.legal strong { font-weight: 800; }
.legal code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; }

/* ---------- Below desktop: one column ---------- */

@media (max-width: 1199.98px) {
  .display { font-size: 44px; }
  .title { font-size: 40px; }

  .hero { gap: 42px; padding: 24px 20px 72px; overflow: visible; }
  .hero-sub { width: 100%; }

  .phone { width: 270px; height: 480px; }
  .phone-placeholder { width: 315px; height: 560px; }

  .feature {
    display: grid;
    grid-template-columns: minmax(50px, 1fr);
    grid-auto-rows: min-content;
    justify-content: start;
    gap: 44px;
    padding: 76px 20px;
  }
  .feature .copy { place-self: start; width: 100%; }
  .feature .phone { place-self: start center; }
  .feature .phone-start { place-self: start; }

  .split { flex-direction: column; gap: 44px; padding: 76px 20px; }
  .split .copy,
  .thread { flex: none; width: 100%; }
  .thread { padding: 0; }

  .compare-phones { gap: 44px; }

  .cta { padding: 76px 20px 32px; border-radius: 24px 24px 0 0; }
  .cta-title { width: 100%; font-size: 40px; }
  .cta-body { width: 100%; }

  .footer { padding: 0 20px 28px; }
  .footer-standalone { border-radius: 24px 24px 0 0; padding-top: 32px; }
  .legal-nav { padding: 24px 20px 0; }
  .legal { padding: 48px 20px 76px; }
}

@media (max-width: 809.98px) {
  .title { font-size: 32px; }

  /* Two 315px phones and their gap no longer fit side by side. */
  .compare-phones { flex-direction: column; align-items: center; }

  .footer-bar { flex-direction: column-reverse; align-items: flex-start; }
}

/* ---------- Reduced motion: fades only, nothing travels ---------- */

@media (prefers-reduced-motion: reduce) {
  .compare-phones { animation-name: hero-fade; }
  .js [data-reveal],
  .js [data-reveal^="-"] { transform: none; }
  .button,
  .button:hover { transform: none; transition: opacity 0.2s ease; }
}
@keyframes hero-fade {
  from { opacity: 0.001; }
  to { opacity: 1; }
}