/* Product campaign v2. Photography carries the material; copy carries one thought at a time. */
.product-home {
  --font-body: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-body); --display-weight: 600; --display-tracking: -.035em;
  --display-leading: 1.06; --ink: #25211e; --ink-soft: #655e58; --page: #f5f4f1;
  --max: 82.5rem; --gutter: clamp(1.25rem, 4vw, 5rem);
  background: var(--page); font-size: 17px; line-height: 1.55;
}
.product-home .site-header { position: sticky; inset: 0 0 auto; z-index: 5; padding: .45rem 0; color: var(--ink); background: rgb(250 249 247 / .94); backdrop-filter: blur(18px); border-bottom: 1px solid rgb(37 33 30 / .08); }
.product-home .site-header .wrap { min-height: 3.1rem; max-width: 90rem; }
.product-home .logo { width: 3.2rem; filter: brightness(.12); }
.product-home .site-nav { gap: clamp(1.25rem, 3vw, 2.5rem); }
.product-home .site-nav a:not(.btn) { font-size: .8125rem; font-weight: 400; }
.product-home .site-header .btn { background: #322922; color: #fff; border-radius: 999px; min-height: 2.75rem; padding: .65rem 1.2rem; font-size: .8125rem; }
.product-home .site-header :focus-visible { outline-color: #755034; }
.product-home .site-nav .btn span[aria-hidden] { display: none; }
.product-home .nav-long { display: inline; }
.product-home .nav-short { display: none; }
.product-name { font-size: 1rem; font-weight: 600; margin-bottom: .85rem; }
.film h1 { font-size: clamp(3.5rem, 6.5vw, 6rem); font-weight: 600; letter-spacing: -.04em; }
.hero-description { font-size: clamp(1.125rem, 1.5vw, 1.4rem); margin: 1rem auto .55rem; line-height: 1.5; }
.quiet-link { display: inline-flex; gap: .6rem; align-items: center; min-height: 44px; font-size: .9375rem; font-weight: 500; text-decoration: none; color: #694932; }
.quiet-link:hover { text-decoration: underline; }

/* Scroll film. By default each chapter is a picture with its copy above it. With JavaScript and motion
   allowed, film-on.js (in the head, before the first paint) adds .film-on to <html>: the section becomes a
   tall scroll track, the stage sticks to the viewport, and the scroll position picks the frame film.js draws. */
.film { position: relative; background: #efe7dc; text-align: center; scroll-margin-top: 4rem; }
.film-chapter { display: flex; flex-direction: column; }
.film-copy { order: -1; padding: clamp(3rem, 6vw, 5rem) var(--gutter) clamp(1.75rem, 3vw, 2.75rem); }
.film-copy h2 { font-size: clamp(2.5rem, 4.5vw, 4.5rem); }
.film-copy h2 + p { font-size: clamp(1.0625rem, 1.5vw, 1.3125rem); color: var(--ink-soft); margin-top: 1.25rem; }
.film-still { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.film-on .film { height: 1260vh; }
.film-on .product-home .site-header { position: fixed; width: 100%; }
.product-home .site-header--eased { transition: background-color .3s, border-color .3s; } /* not on load: it would flash a white bar */
.film-on .product-home .site-header:not(.site-header--solid) { background: transparent; border-bottom-color: transparent; backdrop-filter: none; }
.film-on .film .film-stage { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: clip; }
.film-on .film .film-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The book's screen during the hold (film.js places it on the held frame). Its edges are plain bezel, the same
   pixels as the frame under it, and fade out over the outer 2% so no seam shows. It fades in, but hides at once:
   leaving the hold, the book moves on under it, and a fade would double-expose its video over the moving book. */
.film-flick { position: absolute; object-fit: fill; pointer-events: none; opacity: 0;
  -webkit-mask: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent), linear-gradient(transparent, #000 2%, #000 98%, transparent);
  -webkit-mask-composite: source-in; mask: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent), linear-gradient(transparent, #000 2%, #000 98%, transparent);
  mask-composite: intersect; }
.film-flick.is-on { opacity: 1; transition: opacity .2s; }
.film-on .film .film-still { display: none; }
.film-on .film:not(.film--painted) .film-chapter--hero .film-still { display: block; position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
.film-on .film .film-chapter { position: absolute; inset: 0; display: block; isolation: isolate; opacity: var(--shown, 0); pointer-events: none; }
.film-on .film .film-chapter.is-current { pointer-events: auto; }
.film-on .film .film-chapter:focus-within { opacity: 1; }
.film-on .film .film-chapter--hero { opacity: var(--shown, 1); } /* the opening copy shows before film.js first runs */
.film-on .film .film-chapter--hero .quiet-link { color: var(--ink); font-weight: 600; }
.film-on .film .film-copy { position: absolute; top: 50%; left: max(var(--gutter), calc((100vw - 1320px) / 2)); width: min(30rem, 34vw); padding: 0; text-align: left; translate: 0 calc(-50% + (1 - var(--shown, 0)) * 1.25rem); }
/* The opening copy keeps to the clear wall left of the plant, wherever the frame lands. */
.film-on .film .film-chapter--hero h1 { font-size: clamp(3rem, 5vw, 5.5rem); }
/* Unlock your memories takes two lines: a little smaller, and lifted so the line under it stays clear of the bowl.
   801/1000, not 4/5: at exactly 4:5 the tall-window rule below anchors the copy at the foot instead. */
@media (min-width: 40.0625rem) and (min-aspect-ratio: 801/1000) {
 .film-on .film .film-chapter--hero h1 { font-size: clamp(2.75rem, 4.4vw, 4.75rem); }
 .film-on .film .film-chapter--hero .film-copy { translate: 0 calc(-50% - 2rem + (1 - var(--shown, 0)) * 1.25rem); }
}
/* On the open book's plain inner cover: placed in frame coordinates (film.js sets --fx, --fw). */
.film-on .film .film-copy--cover { left: calc(var(--fx, 0px) + .165 * var(--fw, 100vw)); width: calc(.27 * var(--fw, 100vw)); }
.film-on .film .film-copy--top { top: calc(5.5rem + 3vh); translate: 0 calc((1 - var(--shown, 0)) * 1.25rem); }
.film-on .film .film-copy h2 + p { color: var(--ink); } /* over the picture the soft grey disappears into the book and the wall */
.waitlist-heading h2 { font-size: clamp(2.5rem, 4.5vw, 4.5rem); }
.material-scene { position: relative; background: #201b18; color: #fff; overflow: clip; }
.material-scene > img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; object-position: center; }
.material-copy { position: absolute; inset: 0 auto 0 max(var(--gutter), calc((100vw - 1320px)/2)); width: 29%; display: flex; flex-direction: column; justify-content: center; align-items: start; }
.material-copy h2 { font-size: clamp(2.5rem, 4vw, 4rem); line-height: 1.1; letter-spacing: -.03em; }
.material-copy p { margin-top: 1.5rem; font-size: 1rem; color: #eee5dc; max-width: 19ch; }
/* Safety: how Kin treats family videos, one icon and one line each. */
.safety { padding-block: clamp(4.5rem, 8vw, 8.5rem); scroll-margin-top: 4rem; }
.safety-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 0 clamp(2rem, 6vw, 6rem); max-width: 1120px; }
.safety h2 { font-size: clamp(2.5rem, 4.5vw, 4.5rem); }
.safety-intro > p { font-size: 1.25rem; margin-block: 1.5rem 1rem; color: var(--ink-soft); max-width: 22ch; }
.safety-points { list-style: none; padding: 0; }
.safety-points li { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); align-items: center; gap: .15rem 1.1rem; padding-block: 1.1rem; border-top: 1px solid rgb(37 33 30 / .14); }
.safety-points li:first-child { border-top: 0; padding-top: .35rem; }
.safety-icon { grid-row: span 2; align-self: center; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: rgb(37 33 30 / .06); color: var(--ink); }
.safety-icon svg { width: 1.375rem; height: 1.375rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.safety-points h3 { font-size: 1.25rem; letter-spacing: -.015em; line-height: 1.25; }
.safety-points p { grid-column: 2; color: var(--ink-soft); max-width: 46ch; }
/* Made in the USA closes the list with the flag itself in the icon column, as wide as the icons above it. */
.us-flag { width: 2.75rem; height: auto; aspect-ratio: 247 / 130; border-radius: 2px; box-shadow: 0 0 0 1px rgb(37 33 30 / .12), 0 1px 2px rgb(37 33 30 / .14); }
.waitlist-section { padding-block: clamp(4.5rem, 7vw, 7rem); background: #28231f; color: #faf7f2; scroll-margin-top: 4rem; }
.waitlist-wrap { max-width: 1000px; }
.waitlist-heading { text-align: center; }
.waitlist-open { margin-top: 2rem; min-height: 52px; border-radius: 999px; padding-inline: 1.9rem; background: #ead8bd; color: #302820; font-family: var(--font-body); font-size: 1rem; }
.waitlist-open:hover { background: #f3e5cf; }
.waitlist-heading noscript p { margin-top: 1.5rem; color: #d1c5b9; }
.waitlist-heading noscript a { color: inherit; }
/* The form, in a dialog on the same dark leather as the section. */
.waitlist-dialog { width: min(44rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); padding: clamp(1.75rem, 4vw, 2.75rem); border: 0; border-radius: 20px; background: #28231f; color: #faf7f2; overflow: auto; overscroll-behavior: contain; }
.waitlist-dialog::backdrop { background: rgb(20 16 13 / .6); backdrop-filter: blur(6px); }
.waitlist-dialog h2 { font-size: clamp(1.9rem, 3.5vw, 2.6rem); padding-right: 2.5rem; }
.waitlist-lead { margin: .6rem 0 1.75rem; color: #d1c5b9; }
.waitlist-close { position: absolute; top: .9rem; right: .9rem; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: #faf7f2; font-size: 1.75rem; line-height: 1; cursor: pointer; }
.waitlist-close:hover { background: rgb(255 255 255 / .1); }
.product-home .waitlist-dialog .waitlist-form { grid-template-columns: 1fr; }
.product-home .waitlist-dialog .form-actions { padding-top: .25rem; max-width: none; }
.product-home .waitlist-dialog .form-actions .btn { width: 100%; }
html:has(.waitlist-dialog[open]) { overflow: hidden; }
.waitlist-heading > p { margin-top: 1rem; color: #d1c5b9; font-size: 1.1875rem; }
.waitlist-body { max-width: 720px; margin-inline: auto; }
.product-home .waitlist-form { grid-template-columns: 1fr auto; align-items: start; gap: 1rem; }
.product-home .fields { grid-template-columns: 1fr 1fr; gap: 1rem; }
.product-home .field label { font-size: .8125rem; font-weight: 500; }
.product-home input { min-height: 50px; border: 1px solid #8b7a6c; background: transparent; color: #fff; border-radius: 8px; }
.product-home .form-actions { padding-top: 1.65rem; display: grid; gap: .5rem; max-width: 12rem; }
.product-home .form-actions .btn { min-height: 50px; border-radius: 999px; padding-inline: 1.4rem; background: #ead8bd; color: #302820; font-family: var(--font-body); font-size: .875rem; white-space: nowrap; }
.product-home .field-error, .product-home .form-status { font-size: .8125rem; }
.product-home .form-status.is-error { color: #ffcabf; }
.product-home .waitlist-done { text-align: center; padding: 1.5rem; }
.product-home .waitlist-done h3 { font-size: 1.75rem; }
.signup-note { margin-top: 1.4rem; color: #d1c5b9; text-align: center; font-size: .8125rem; }
.signup-note details { margin-top: .75rem; }
.signup-note summary { display: inline-flex; min-height: 44px; align-items: center; cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }
.consent-details { text-align: left; padding: 1rem; background: #362e27; border-radius: 8px; }
.consent-details .privacy-note { font-size: .8125rem; color: #e2d5c7; }
.consent-details .privacy-note p + p { margin-top: .5rem; }
.product-footer { background: #f5f4f1; padding: 2.25rem 0 1.5rem; color: #625950; font-size: .75rem; }
.footer-top { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; }
.footer-top nav { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; }
.footer-top nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.footer-top nav a:hover { text-decoration: underline; }
.concept-note { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid #ddd6cd; }
@media (max-width: 59.9375rem) {
 .material-scene > img { aspect-ratio: 4/3; }
 .material-copy { width: 31%; }
 .material-copy h2 { font-size: clamp(2rem, 4.5vw, 3.5rem); }
 .material-copy p { max-width: 14ch; }
 .safety h2 { font-size: 2.6rem; }
 }
@media (max-width: 40rem) {
 .product-home .site-nav .nav-section { display: none; }
 .product-home .site-header .wrap { min-height: 3rem; }
 .product-home .logo { width: 2.8rem; }
 .film h1 { font-size: clamp(2.85rem, 10.3vw, 4rem); }
 .film-copy { padding-top: 2.8rem; }
 .film-copy h2 { font-size: 2.7rem; }
 .film-copy h2 + p { max-width: 27ch; margin-inline: auto; }
 .film-copy p br { display: none; }
 .film-still { aspect-ratio: 4 / 5; }
 .film-on .film .film-copy, .film-on .film .film-copy--top { top: auto; bottom: max(2.75rem, calc(env(safe-area-inset-bottom) + 2rem)); left: var(--gutter); right: var(--gutter); width: auto; text-align: center; translate: 0 calc((1 - var(--shown, 0)) * 1rem); }
 .film-on .film .film-chapter::after { content: ""; position: absolute; inset: auto 0 0; z-index: -1; height: 58%; background: linear-gradient(to top, rgb(247 241 233 / .95), rgb(247 241 233 / .8) 45%, transparent); }
 .film-on .film .film-copy h2 { font-size: 2.2rem; }
 .film-on .film .film-copy h2 + p { margin-top: .75rem; font-size: 1rem; }
 .hero-description { max-width: 25ch; font-size: 1.0625rem; margin-top: .85rem; }
 .product-name { font-size: .9375rem; margin-bottom: .65rem; }
 .waitlist-heading h2 { font-size: 2.7rem; }
 .material-scene { display: flex; flex-direction: column; }
 .material-scene > img { aspect-ratio: 4/3; object-position: 65%; }
 .material-copy { position: static; width: auto; padding: 2.5rem var(--gutter); order: -1; }
 .material-copy h2 { font-size: 2.8rem; }
 .material-copy h2 br { display: none; }
 .material-copy p { max-width: none; margin-top: 1rem; }
 .safety-grid { grid-template-columns: 1fr; }
 .safety h2 { font-size: 2.55rem; }
 .safety-intro { margin-bottom: 1.25rem; }
 .safety-intro > p { font-size: 1.0625rem; margin-top: 1.25rem; }
 .safety-points li:first-child { border-top: 1px solid rgb(37 33 30 / .14); padding-top: 1.1rem; }
 .product-home .waitlist-form { grid-template-columns: 1fr; }
 .product-home .fields { grid-template-columns: 1fr; }
 .product-home .form-actions { padding-top: .5rem; max-width: none; }
 .product-home .form-actions .btn { width: 100%; }
 .footer-top { flex-wrap: wrap; }
 .footer-top nav { order: 3; width: 100%; justify-content: space-between; gap: .5rem; }
 .concept-note { max-width: 55ch; }
}

/* Tall windows wider than a phone (an upright iPad) get the vertical reframe, so the copy reads at the foot. */
@media (min-width: 40.0625rem) and (max-aspect-ratio: 4/5) {
 .film-on .film .film-copy, .film-on .film .film-copy--top, .film-on .film .film-copy--cover { top: auto; bottom: max(3rem, calc(env(safe-area-inset-bottom) + 2rem)); left: var(--gutter); right: var(--gutter); width: auto; text-align: center; translate: 0 calc((1 - var(--shown, 0)) * 1rem); }
 .film-on .film .film-chapter::after { content: ""; position: absolute; inset: auto 0 0; z-index: -1; height: 50%; background: linear-gradient(to top, rgb(247 241 233 / .95), rgb(247 241 233 / .8) 45%, transparent); }
}