/* cosein.ai — site styles */

/* every dimension is design pixels × var(--u). --u is FIXED per breakpoint
   (type never scales continuously with the window); the 890-unit text
   column is centred, images are full-bleed. */

:root {
  --u: 1.4px;
  --w: #e5e5e5;   /* headline / term */
  --lg: #b2b2b2;  /* caps annotations / nav */
  --g: #7f7f7f;   /* body / definitions */
  --dg: #4a4a4a;  /* placeholder labels */
  --hair: #1e1e1e;
}
@media (min-width: 1700px) { :root { --u: 1.55px; } }
@media (max-width: 1279px) { :root { --u: 1.2px; } }
@media (max-width: 1023px) { :root { --u: 1px; } }
@media (max-width: 700px) { :root { --u: 0.94px; } }

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

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

body {
  background: #000;
  color: var(--g);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

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

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
a { color: inherit; text-decoration: none; }
::selection { background: #e5e5e5; color: #000; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 1px solid var(--w); outline-offset: 3px; }

.m { margin-left: calc(45 * var(--u)); margin-right: calc(45 * var(--u)); }

/* ── type ───────────────────────────────────────────────────── */

.t-title {
  font-size: calc(36 * var(--u));
  line-height: 1.11;
  font-weight: 300;
  color: var(--w);
  text-align: center;
  letter-spacing: 0;
}
.t-body {
  font-size: calc(18 * var(--u));
  line-height: 1.2;
  font-weight: 300;
  color: var(--g);
  text-align: center;
}
.t-caps {
  font-size: calc(10 * var(--u));
  line-height: 1.5;
  font-weight: 300;
  color: var(--lg);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.t-caps.center { text-align: center; }
.t-title-xl { font-size: calc(48 * var(--u)); }
@media (max-width: 700px) { .t-title-xl { font-size: calc(30 * var(--u)); } }
.t-accent { color: var(--w); }

@media (max-width: 700px) {
  .t-title { font-size: calc(26 * var(--u)); }
  .t-body { font-size: calc(15 * var(--u)); }
  .t-caps { font-size: calc(10 * var(--u)); }
  br.d { display: none; }
}

/* spacers in design px */
.sp-45 { height: calc(45 * var(--u)); }
.sp-60 { height: calc(60 * var(--u)); }
.sp-90 { height: calc(90 * var(--u)); }
.sp-134 { height: calc(134 * var(--u)); }

/* ── nav ────────────────────────────────────────────────────── */

.nav {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(24 * var(--u));
  padding: calc(20 * var(--u)) 0 calc(16 * var(--u));
}
.nav a:hover { color: var(--w); }
.wordmark { font-size: calc(16 * var(--u)); line-height: 1.15; color: var(--lg); font-weight: 300; }
.cluster { display: flex; gap: calc(10 * var(--u)); align-items: flex-start; }
.cluster svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); stroke: var(--lg); fill: none; stroke-width: 1; flex: none; }
.cluster svg * { vector-effect: non-scaling-stroke; }
.cluster-title { font-size: calc(16 * var(--u)); color: var(--lg); line-height: 1.1; }
.cluster-sub { font-size: calc(9 * var(--u)); line-height: 1.5; color: var(--g); }
.cluster-sub a { display: block; }
.nav-mark { width: calc(28 * var(--u)); height: calc(28 * var(--u)); color: var(--lg); flex: none; }
@media (max-width: 700px) {
  .cluster-sub, .nav-mark { display: none; }
  .wordmark, .cluster-title { font-size: calc(15 * var(--u)); }
  .cluster-title { white-space: nowrap; }
}

/* ── image / film placeholders ──────────────────────────────── */

.ph {
  position: relative;
  background: radial-gradient(ellipse 62% 55% at 50% 42%, #131313 0%, #0a0a0a 55%, #000 100%);
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  display: grid;
  place-content: center;
  text-align: center;
  gap: calc(8 * var(--u));
  overflow: hidden;
}
.ph::before, .ph::after {
  content: '';
  position: absolute;
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
  border: 0 solid #2a2a2a;
}
.ph::before { top: calc(18 * var(--u)); left: calc(18 * var(--u)); border-top-width: 1px; border-left-width: 1px; }
.ph::after { bottom: calc(18 * var(--u)); right: calc(18 * var(--u)); border-bottom-width: 1px; border-right-width: 1px; }
.ph-tag {
  font-size: calc(10 * var(--u));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #4a4a4a;
}
.ph-note {
  font-size: calc(10 * var(--u));
  line-height: 1.5;
  color: #3c3c3c;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  max-width: calc(420 * var(--u));
  margin: 0 auto;
}
.ph-hero { height: calc(860 * var(--u)); grid-template-rows: auto auto; align-content: center; gap: calc(40 * var(--u)); }
.hero-device {
  width: calc(268 * var(--u));
  height: calc(268 * var(--u));
  margin: 0 auto;
  border-radius: calc(38 * var(--u));
  background:
    radial-gradient(120% 90% at 50% -20%, #101012 0%, #08080a 42%, #050506 100%);
  border: 1px solid #131315;
  border-top-color: #202024;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -18px 40px rgba(0, 0, 0, 0.55),
    0 calc(50 * var(--u)) calc(90 * var(--u)) rgba(0, 0, 0, 0.85);
}
.ph-wide { height: calc(620 * var(--u)); }
.ph-film { height: calc(551 * var(--u)); }
.ph-film .play {
  width: calc(44 * var(--u)); height: calc(44 * var(--u));
  border: 1px solid #2a2a2a; border-radius: 50%;
  margin: 0 auto calc(6 * var(--u));
  display: grid; place-content: center;
}
.ph-film .play::after {
  content: ''; display: block;
  border-left: calc(10 * var(--u)) solid var(--dg);
  border-top: calc(6 * var(--u)) solid transparent;
  border-bottom: calc(6 * var(--u)) solid transparent;
  margin-left: calc(2 * var(--u));
}

/* ── hero ───────────────────────────────────────────────────── */

.hero-eyebrow { margin-top: calc(-64 * var(--u)); position: relative; }
@media (max-width: 700px) { .hero-eyebrow { margin-top: calc(-40 * var(--u)); } }

/* ── reveal ─────────────────────────────────────────────────── */

/* .rv blocks are always visible: this page is read by automated capture tools
   that never scroll, so text must not depend on a scroll-triggered reveal. */

/* ── caps annotation rows (3+5 columns of the 12-col grid) ──── */

.c-row { display: grid; grid-template-columns: 3fr 5fr 4fr; }
.c-row .t-caps { grid-column: 2; }
@media (max-width: 700px) {
  .c-row { display: block; }
}

/* ── features list ──────────────────────────────────────────── */

.features { display: grid; grid-template-columns: 3fr 6fr 3fr; }
.features ul { grid-column: 2; list-style: none; }
.features li {
  font-size: calc(13 * var(--u));
  line-height: 2.1;
  color: var(--lg);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.features li::before { content: '· '; color: var(--g); }
@media (max-width: 700px) { .features { display: block; } }

/* ── specifications ─────────────────────────────────────────── */

.specs { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(24 * var(--u)); }
.specs h2 {
  font-size: calc(24 * var(--u));
  line-height: 1.15;
  font-weight: 300;
  color: var(--w);
}
.spec-group { margin-bottom: calc(22 * var(--u)); }
.spec-group dt { font-size: calc(13 * var(--u)); line-height: 1.3; color: var(--w); font-weight: 300; }
.spec-group dd { font-size: calc(13 * var(--u)); line-height: 1.3; color: var(--g); font-weight: 100; }
@media (max-width: 700px) {
  .specs { grid-template-columns: 1fr; gap: calc(10 * var(--u)); }
  .spec-group dt, .spec-group dd { font-size: calc(12 * var(--u)); }
}

/* ── pill button (the one control) ──────────────────────────── */

.pill {
  display: inline-block;
  background: var(--w);
  color: #0f0e12;
  border: 0;
  border-radius: calc(99 * var(--u));
  font-family: inherit;
  font-size: calc(10 * var(--u));
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: calc(8 * var(--u)) calc(20 * var(--u));
  cursor: pointer;
}
.pill:hover { background: #fff; }

.capture { display: flex; justify-content: center; align-items: center; gap: calc(10 * var(--u)); flex-wrap: wrap; }
.capture-input {
  background: transparent;
  border: 1px solid #2a2a2a;
  border-radius: calc(99 * var(--u));
  color: var(--w);
  font-family: inherit;
  font-weight: 300;
  font-size: calc(11 * var(--u));
  padding: calc(7 * var(--u)) calc(16 * var(--u));
  min-width: calc(220 * var(--u));
}
.capture-input::placeholder { color: var(--dg); }
.capture-input:focus { border-color: var(--g); outline: none; }

/* ── footer ─────────────────────────────────────────────────── */

.footer { border-top: 1px solid var(--hair); padding: calc(28 * var(--u)) 0 calc(40 * var(--u)); }
.footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: calc(12 * var(--u)) calc(28 * var(--u)); }
.footer-row a, .footer-row span { font-size: calc(12 * var(--u)); color: var(--g); }
.footer-row a:hover { color: var(--w); }
.legal { margin-top: calc(18 * var(--u)); font-size: calc(9 * var(--u)); line-height: 1.7; color: var(--dg); max-width: calc(620 * var(--u)); }

/* ── 2026-09: fixed scale, capped column, slimmer nav ───────── */
body { min-width: 340px; }
.m { margin-left: max(calc(45 * var(--u)), calc((100vw - 890 * var(--u)) / 2)); margin-right: max(calc(45 * var(--u)), calc((100vw - 890 * var(--u)) / 2)); }
.nav { padding: calc(14 * var(--u)) 0 calc(11 * var(--u)); }
.cluster-sub a { display: inline; margin-right: calc(9 * var(--u)); }
.t-caps a:hover { color: var(--w); }
@media (max-width: 700px) {
  .m { margin-left: calc(24 * var(--u)); margin-right: calc(24 * var(--u)); }
  .cluster svg { display: none; }
  .nav { gap: calc(14 * var(--u)); }
}

/* ── live hero: the render, revealed piece by piece ─────────── */
.ph-stage { display: block; height: auto; background: #000; border-bottom: 0; }
.ph-stage::before, .ph-stage::after { display: none; }   /* no crop marks on the hero */
/* the device sits 2.72% left of centre inside the render (bbox centre 851/1800) — nudge the frame so it lands on the page axis */
.hero-frame { transform: translateX(2.72%); position: relative; width: min(100%, calc(82vh * 1800 / 989)); aspect-ratio: 1800 / 989; margin: 0 auto; }
.hero-base { position: absolute; inset: 0; width: 100%; height: 100%; }
.lv { position: absolute; inset: 0; background: url(/assets/t1-hero.webp) center / 100% 100% no-repeat; }
.boot .lv { opacity: 0; transition: opacity 280ms ease; }
.boot .lv.on { opacity: 1; }
.boot .lv-yn.on { animation: lv-wait 2.8s ease-in-out 1.2s infinite; }
.boot .lv-sync.on { animation: lv-pulse 2.6s ease-in-out infinite; }
.tw { position: absolute; width: 0.889%; height: 1.517%; border-radius: 12%; background: #e5e5e5; opacity: 0; animation: lv-tw 3.6s ease-in-out infinite; }
@keyframes lv-wait { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes lv-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes lv-tw { 0%, 70%, 100% { opacity: 0; } 82% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .tw { animation: none; } }
.hero-eyebrow { margin-top: calc(-40 * var(--u)); }

/* ── product images (renders on black) ──────────────────────── */
.ph-img { height: auto; max-height: 72vh; width: 100%; background: #000; }
.ph-img::before, .ph-img::after { z-index: 1; }
.ph-img img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ph-contain img { object-fit: contain; }
.ph-cover img { object-fit: cover; object-position: left center; }

/* close-up: no frame — the render dissolves into the page on all four sides */
.fig-fade { position: relative; width: min(calc(100% - 90 * var(--u)), calc(600 * var(--u))); margin: 0 auto; overflow: hidden; }
.fig-fade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fig-fade::after { content: ''; position: absolute; inset: -1px; pointer-events: none;
  background:
    linear-gradient(to right, #000 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 72%, #000 100%),
    linear-gradient(to bottom, #000 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 74%, #000 100%); }
@media (max-width: 700px) { .fig-fade { width: 100%; } }
@media (pointer: coarse) { .capture-input { font-size: 16px; } }
.t-caps.ok { color: #bcf63f; }   /* the one acid-green moment: you're on the list. */

/* ── text pages (privacy / terms / 404) ─────────────────────── */
.page { max-width: calc(560 * var(--u)); margin: 0 auto; padding: calc(80 * var(--u)) calc(45 * var(--u)) calc(120 * var(--u)); }
.page h1 { font-size: calc(36 * var(--u)); line-height: 1.11; font-weight: 300; color: var(--w); }
.page h2 { margin: calc(34 * var(--u)) 0 calc(8 * var(--u)); font-size: calc(10 * var(--u)); font-weight: 300; color: var(--lg); text-transform: uppercase; letter-spacing: 0.06em; }
.page p, .page li { font-size: calc(12.5 * var(--u)); line-height: 1.65; color: var(--g); }
.page h1 + p { margin-top: calc(10 * var(--u)); color: var(--dg); }
.page p + p { margin-top: calc(9 * var(--u)); }
.page ul { margin-top: calc(7 * var(--u)); padding-left: calc(15 * var(--u)); }
.page li + li { margin-top: calc(5 * var(--u)); }
.page a { color: var(--w); border-bottom: 1px solid #2a2a2a; }
@media (max-width: 700px) {
  .page { max-width: none; padding: calc(60 * var(--u)) calc(24 * var(--u)) calc(90 * var(--u)); }
  .page h1 { font-size: calc(28 * var(--u)); }
  .page p, .page li { font-size: calc(15 * var(--u)); }
}