/* Landing art direction: a collection laid out like an open catalogue.
   Scoped to this page; shared legal and author pages retain their styles. */
.landing {
  --wrap: 1344px;
  --gutter: clamp(22px, 4.5vw, 64px);
  --section-y: clamp(72px, 9vw, 132px);
  --muted: #b9b2a9;
  --mint-field: #b8d8ca;
  --mint-ink: #152c25;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  /* Soft depth on the dark surfaces: a dark drop plus a faint top highlight. */
  --lift: inset 0 1px 0 rgb(255 255 255 / 5%), 0 10px 20px -14px rgb(0 0 0 / 70%);
  --shadow-phone: inset 0 1px 0 rgb(255 255 255 / 8%), 0 18px 30px -14px rgb(0 0 0 / 75%);
  --shadow-accent: 0 10px 22px -12px rgb(79 191 168 / 50%);
  overflow-x: clip;
}
.landing a, .landing button, .landing summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.landing a { text-underline-offset: .22em; }
.landing :focus-visible { outline-width: 3px; outline-offset: 5px; }
.landing .topbar { position: relative; background: var(--bg); border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; } /* taste-skill-ignore: removes inherited glass */
.landing .topbar__inner { min-height: 96px; }
.landing .brand { font-size: 18px; gap: 12px; }
.landing .brand img { width: 36px; height: 36px; }
.landing .topbar__nav { display: flex; align-items: center; gap: 8px; }
.landing .topbar__link { color: var(--ink); font-size: 16px; padding: 12px 0 12px 16px; }
.landing .hero { background: none; padding-block: 48px 0; }
.landing .hero__grid { display: block; }
.landing .hero__copy { display: block; }
.landing h1 {
  max-width: 1120px;
  font-size: clamp(40px, 6.6vw, 88px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.landing .hero__accent { color: var(--accent); font-style: italic; }
.landing .lead { max-width: 58ch; margin: 28px 0 0; font-size: 18px; line-height: 1.75; color: var(--ink); }
.landing .soon { gap: 14px; margin: 32px 0 0; }
.landing .soon__note { font-size: 14px; font-weight: 400; }
.landing .btn { min-height: 54px; padding: 14px 28px; border: 0; border-radius: 8px; letter-spacing: 0; font-size: 16px; font-weight: 800; box-shadow: var(--shadow-accent); transition: transform 160ms var(--ease-out); }
.landing .btn:active { transform: scale(.97); }
.landing .btn:hover { filter: none; }
/* Full screenshots inside a shared, proportionate phone frame. */
.landing .hero__visual {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  align-items: center;
  gap: 24px;
  min-height: 0;
  margin-top: 36px;
  padding: 48px 6%;
  background: url('/assets/tabletop.svg') center / 100% 100% no-repeat;
}
.landing .hero__visual::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 440px;
  height: 440px;
  left: 50%;
  top: 50%;
  background: url('/assets/mark.svg') center / contain no-repeat;
  opacity: .08;
  transform: translate(-50%, -50%) rotate(22deg);
}
.landing .shot, .landing .hero__companion {
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
  min-width: 0;
}
.landing .shot img, .landing .hero__companion img { width: 100%; border-radius: 0; }
.landing .hero__visual > figure {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.landing .shot--hero {
  max-width: 320px;
  height: auto;
  justify-self: center;
  transform: none;
  z-index: 2;
}
.landing .hero__companion { max-width: 260px; justify-self: center; }
.landing .hero__companion--collection { height: auto; margin-top: 48px; rotate: -3deg; }
.landing .hero__companion--stats { height: auto; margin-top: 48px; rotate: 3deg; }
.landing .collection-story > .wrap { display: block; }
.landing .section-divider {
  width: min(60%, 480px);
  height: 1px;
  margin: 0 auto clamp(40px, 5vw, 64px);
  border: 0;
  background: rgb(115 124 115 / 38%);
}
.landing .section__title { text-align: left; font-size: clamp(34px, 4vw, 54px); line-height: 1.08; font-weight: 500; letter-spacing: -.035em; margin: 0; }
.landing .showcase { grid-template-columns: 1fr 1fr; gap: 64px 40px; min-width: 0; }
.landing .showcase__row { display: flex; flex-direction: column; align-items: stretch; gap: 28px; overflow: visible; }
.landing .showcase__row:first-child, .landing .showcase__row:nth-child(4) { grid-column: 1 / -1; display: grid; grid-template-columns: .7fr 1.3fr; align-items: center; gap: 72px; }
.landing .showcase__row:nth-child(2) .shot, .landing .showcase__row:nth-child(3) .shot { margin-top: auto; }
.landing .showcase__copy { max-width: none; text-align: left; order: -1; }
.landing .showcase__copy h2 { font-family: var(--display); font-size: clamp(27px, 2.7vw, 38px); line-height: 1.12; letter-spacing: -.025em; font-weight: 500; margin-bottom: 18px; }
.landing .showcase__copy p { font-size: 17px; line-height: 1.75; color: var(--ink); max-width: 60ch; }
.landing .showcase__row .shot {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 100%;
  height: auto;
  min-width: 0;
  padding: 32px;
  border-radius: 0;
  background: url('/assets/tabletop.svg') center / auto 110% no-repeat;
  /* Clip only the oversized background artwork; the full phone fits inside padding. */
  overflow: clip;
  order: 0;
}
.landing .showcase__row .shot::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 12% 18%;
  background: url('/assets/mark.svg') center / contain no-repeat;
  opacity: .13;
  transform: rotate(-18deg);
}
.landing .showcase__row .shot picture { width: min(100%, 300px); height: auto; rotate: -2deg; }
.landing .showcase__row:nth-child(2) .shot { background-position: 32% center; }
.landing .showcase__row:nth-child(2) .shot::before { transform: rotate(16deg); }
.landing .showcase__row:nth-child(2) .shot picture { rotate: 2deg; }
.landing .showcase__row:nth-child(3) .shot { background-position: 70% center; }
.landing .showcase__row:nth-child(3) .shot::before { transform: rotate(-28deg); }
.landing .showcase__row:nth-child(4) .shot { background-position: 18% center; }
.landing .showcase__row:nth-child(4) .shot::before { transform: rotate(22deg); }
.landing .showcase__row:nth-child(4) .shot picture { rotate: 2deg; }
/* The speaker sits in the top bezel; it never covers the screenshot. */
.landing .phone {
  position: relative;
  display: block;
  padding: 22px 9px 12px;
  border: 2px solid #454941;
  border-radius: 30px;
  background: #20221f;
  box-shadow: var(--shadow-phone);
  overflow: hidden;
}
.landing .phone::before {
  content: "";
  position: absolute;
  width: 30px;
  height: 3px;
  border-radius: 3px;
  background: #74796f;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
}
.landing .phone picture { display: block; }
.landing .phone img { display: block; width: 100%; height: auto; border-radius: 16px; }
.landing .features { display: block; margin-top: 64px; }
.landing .feature { display: grid; grid-template-columns: .7fr 1.3fr; gap: 72px; background: none; border: 0; border-radius: 0; padding: 30px 0; }
.landing .feature h2 { font-family: var(--display); font-size: clamp(24px, 2.4vw, 32px); line-height: 1.2; font-weight: 500; letter-spacing: -.02em; margin: 0; }
.landing .feature p { color: var(--ink); font-size: 17px; max-width: 60ch; }
.landing .faq-page { padding-top: clamp(32px, 5vw, 64px); }
.landing .wrap--narrow { max-width: var(--wrap); display: grid; grid-template-columns: .7fr 1.3fr; gap: 72px; align-items: start; }
.landing .faq { min-width: 0; display: grid; gap: 8px; }
.landing .faq details, .landing .faq details:first-child { border: 0; background: var(--surf2); border-radius: 8px; padding-inline: 22px; box-shadow: var(--lift); }
.landing .faq summary { padding: 22px 30px 22px 0; font-size: 16px; font-weight: 600; line-height: 1.55; }
.landing .faq summary::after { width: 8px; height: 8px; border-color: var(--accent); transition: transform 200ms var(--ease-out); }
.landing .faq details p { color: var(--ink); font-size: 16px; line-height: 1.75; padding-bottom: 24px; }
.landing .final { background: var(--mint-field); color: var(--mint-ink); text-align: left; }
.landing .final__inner { display: grid; grid-template-columns: .7fr 1.3fr; gap: 72px; align-items: center; }
.landing .final__copy { min-width: 0; }
.landing .final__copy > img { width: 56px; height: 56px; filter: none; margin-bottom: 32px; }
.landing .final h2 { font-size: clamp(38px, 4.5vw, 60px); line-height: 1.05; font-weight: 500; }
.landing .final__lead { color: var(--mint-ink); font-size: 17px; margin: 24px 0 0; max-width: 32ch; }
.landing .notify { max-width: none; padding: 34px; background: var(--bg); border: 0; border-radius: 10px; box-shadow: 0 24px 44px -26px rgb(21 44 37 / 60%); gap: 22px; color: var(--ink); }
.landing .field__label { font-size: 16px; color: var(--ink); font-weight: 500; }
.landing .field__input { padding: 14px; background: var(--surf2); border-color: var(--muted); border-radius: 6px; }
.landing .field__input:focus { outline: 3px solid var(--accent); outline-offset: 3px; box-shadow: none; } /* taste-skill-ignore: replaces inherited shadow with accessible outline */
.landing .check { color: var(--ink); font-size: 14px; line-height: 1.7; }
.landing .notify__status { font-size: 16px; }
.landing .footer { border: 0; padding-block: 38px; font-size: 14px; }
.landing .footer__inner { align-items: center; gap: 20px; }
.landing .footer a { display: inline-block; padding-block: 11px; }
.landing #avvisami { scroll-margin-top: 24px; }

@media (hover: hover) and (pointer: fine) {
  .landing .btn:hover { transform: translateY(-2px); }
  .landing .topbar__link:hover, .landing .footer a:hover { color: var(--accent); }
  .landing .faq summary:hover { color: var(--accent); }
}

@media (max-width: 1000px) {
  .landing .showcase__row:first-child, .landing .showcase__row:nth-child(4), .landing .wrap--narrow, .landing .final__inner { gap: 40px; grid-template-columns: .65fr 1.35fr; }
  .landing .feature { grid-template-columns: .65fr 1.35fr; gap: 40px; }
  .landing .notify__fields { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .landing .topbar__inner { min-height: 78px; }
  .landing .brand { gap: 8px; font-size: 15px; }
  .landing .brand img { width: 28px; height: 28px; }
  .landing .topbar__link { font-size: 14px; }
  .landing .hero { padding-top: 32px; }
  .landing h1 { font-size: clamp(36px, 7.5vw, 52px); line-height: 1.08; letter-spacing: -.03em; text-wrap: pretty; }
  .landing .lead { margin-top: 24px; font-size: 17px; line-height: 1.7; }
  .landing .soon { margin-top: 28px; }
  .landing .soon__note { font-size: 13px; }
  .landing .hero__visual { min-height: 0; margin-top: 24px; padding: 32px 18px; display: block; background-size: auto 100%; }
  .landing .hero__visual::before { width: 72%; height: auto; aspect-ratio: 1; }
  .landing .hero__visual > .shot--hero { width: min(100%, 280px); height: auto; margin: 0 auto; }
  /* These decorative duplicates appear in full in their own sections below. */
  .landing .hero__visual > .hero__companion { display: none; }
  .landing .collection-story > .wrap, .landing .wrap--narrow, .landing .final__inner { display: block; }
  .landing .section__title { font-size: 36px; margin-bottom: 42px; }
  .landing .showcase { grid-template-columns: 1fr; gap: 48px; }
  .landing .showcase__row, .landing .showcase__row:first-child, .landing .showcase__row:nth-child(4) { display: flex; gap: 24px; }
  .landing .showcase__copy h2 { font-size: 28px; }
  .landing .showcase__copy p, .landing .feature p { font-size: 16px; }
  .landing .showcase__row .shot { height: auto; padding: 28px 20px; background-size: auto 105%; }
  .landing .showcase__row .shot picture { width: min(100%, 280px); height: auto; rotate: 0deg; }
  .landing .features { margin-top: 48px; }
      .landing .feature { display: block; padding: 22px 0; }
  .landing .feature h2 { margin-bottom: 14px; font-size: 25px; }
  .landing .faq details { padding-inline: 18px; }
  .landing .faq summary { padding-block: 20px; }
  .landing .final__copy { margin-bottom: 32px; }
  .landing .final__copy > img { margin-bottom: 24px; }
  .landing .final h2 { font-size: 46px; }
  .landing .final__lead { max-width: 34ch; margin-top: 20px; }
  .landing .notify { padding: 24px; }
  .landing .footer__inner { display: block; }
  .landing .footer__muted { display: block; margin-top: 12px; }
}

/* Pop once into place. No hidden resting state, no perpetual motion. */
@media (prefers-reduced-motion: no-preference) {
  .landing h1 { animation: title-arrive 800ms var(--ease-out) both; }
  .landing .hero__visual.is-revealing > figure { animation: screen-pop 850ms var(--ease-out) both; }
  .landing .hero__visual.is-revealing > figure:first-child { animation-delay: 90ms; }
  .landing .hero__visual.is-revealing > figure:last-child { animation-delay: 180ms; }
  .landing .showcase .shot.is-revealing picture { animation: screen-pop 750ms var(--ease-out) both; }
  .landing .hero__visual.is-revealing::before, .landing .shot.is-revealing::before { animation: board-arrive 1000ms var(--ease-out) both; }
  .landing .showcase__copy.is-revealing, .landing .feature.is-revealing { animation: content-arrive 600ms var(--ease-out) both; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .landing .hero__visual > figure, .landing .showcase .shot picture { transition: translate 240ms var(--ease-out); }
  .landing .hero__visual > figure:hover, .landing .showcase .shot:hover picture { translate: 0 -6px; }
}
@keyframes title-arrive { from { opacity: .65; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes screen-pop {
  0% { opacity: .3; transform: translateY(30px) scale(.93); }
  70% { opacity: 1; transform: translateY(-3px) scale(1.012); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes board-arrive { from { opacity: 0; scale: .9; } }
@keyframes content-arrive { from { opacity: .5; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .landing *, .landing *::before, .landing *::after { animation: none !important; transition: none !important; }
  .landing .btn:hover, .landing .btn:active { transform: none; }
}