/* Cross pages, from Byscreen's (public/byscreen/style.css): the store pictures' campaign on the web. Black ground,
   white type set large, one photographed scene per idea (the screens composited in), then the practical part
   (steps, price, help) as type on black. Only the scenes' copy positions differ (Cross's own photos). */

:root {
  color-scheme: dark;
  --bg: #000;
  --fg: #F5F5F7;
  --sub: #A1A1A6;
  --dim: #86868B;
  --line: rgba(255, 255, 255, .14);
  --raise: #161617;
  --blue: #0072DE;
  --blue-hover: #1580E4;
  --link: #3D9BFF;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --wide: 1536px;
  --text: 1120px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 64px; background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 17px/1.6 "Pretendard Variable", Pretendard, system-ui, sans-serif;
  word-break: keep-all; overflow-wrap: break-word; -webkit-font-smoothing: antialiased;
}
::selection { background: var(--blue); color: #fff; }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; border-radius: 6px; }
.num { font-variant-numeric: tabular-nums; }
.icon { width: 18px; height: 18px; flex: none; fill: currentColor; }
html { scrollbar-color: #3A3A3C var(--bg); }

/* ---------- top bar ---------- */
.bar {
  position: sticky; top: 0; z-index: 10; height: 52px;
  display: flex; align-items: center; gap: 28px; padding: 0 max(20px, calc((100% - var(--text)) / 2));
  background: rgba(0, 0, 0, .72); backdrop-filter: saturate(1.8) blur(20px); -webkit-backdrop-filter: saturate(1.8) blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.bar .who { display: flex; align-items: center; gap: 10px; color: var(--fg); text-decoration: none; font-weight: 650; font-size: 16px; letter-spacing: -.01em; margin-right: auto; }
.bar .who img { width: 26px; height: 26px; border-radius: 6px; }
.bar nav { display: flex; gap: 24px; }
.bar nav a, .bar .lang { color: #D2D2D7; font-size: 13px; text-decoration: none; }
.bar nav a:hover, .bar .lang:hover { color: var(--fg); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 10px 26px; border-radius: 999px;
  font: inherit; font-size: 17px; font-weight: 600; letter-spacing: -.01em; text-decoration: none; white-space: nowrap;
  color: #fff; background: var(--blue); border: 1px solid transparent;
  transition: background-color .2s, transform .2s var(--ease);
}
.btn:hover { background: var(--blue-hover); text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn.ghost { background: transparent; color: var(--fg); border-color: rgba(245, 245, 247, .5); }
.btn.ghost:hover { background: rgba(255, 255, 255, .08); }
.btn.small { min-height: 32px; padding: 4px 14px; font-size: 13px; }
.btn .icon { width: 18px; height: 18px; }
.btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

/* ---------- scenes: the photo full width, the copy in its empty part ---------- */
.scene { position: relative; max-width: var(--wide); margin: 0 auto; }
.scene > img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2;
  /* the photo's own dark edges melt into the page */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(transparent, #000 8%, #000 92%, transparent);
  mask-composite: intersect;
}
.scene .copy { position: absolute; z-index: 1; } /* above the masked photo, which paints as its own layer */
.h {
  margin: 0; font-weight: 700; letter-spacing: -.04em; line-height: 1.05; text-wrap: balance;
  font-size: clamp(40px, 6.4vw, 96px);
}
.lead { margin: 18px 0 0; color: var(--sub); font-size: clamp(17px, 1.7vw, 24px); line-height: 1.45; letter-spacing: -.01em; }
.scene .copy .lead { color: rgba(245, 245, 247, .78); }
.scene .copy { text-shadow: 0 2px 30px rgba(0, 0, 0, .45); }

.s-hero .copy.top { left: 0; right: 0; top: 6.5%; text-align: center; padding: 0 20px; }
.s-hero .h { font-size: clamp(40px, 5.6vw, 84px); }
.s-hero .copy.bottom { position: relative; margin-top: -3%; } /* under the photo: a hand and the mouse fill its foot */
.s-hero .spec { margin: 16px 0 0; text-align: center; color: var(--dim); font-size: 14px; }


.s-solo .copy { left: 7%; top: 50%; transform: translateY(-50%); }
.s-solo > img { width: 84%; margin-left: auto; } /* the tablet to the right, room for the line (as in the store picture) */
.s-solo .h { font-size: clamp(36px, 5.2vw, 80px); }

.s-type .copy { left: 7%; top: 11%; } /* under the lamp's shade, above its base, left of the tablet */
.s-type .h { font-size: clamp(36px, 5.2vw, 80px); }

.s-dusk::after { content: ""; position: absolute; inset: 0 0 60% 0; background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .3) 60%, transparent); pointer-events: none; }
.s-dusk .copy { left: 0; right: 0; top: 5%; text-align: center; z-index: 1; padding: 0 20px; }
.s-dusk .h { font-size: clamp(32px, 5vw, 76px); }

/* the one motion: each scene's line rises in as it comes into view (visible by default without script) */
.js .scene:not(.s-hero) .copy > * { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform 1.1s var(--ease); }
.js .scene.in .copy > * { opacity: 1; transform: none; }
.js .scene.in .copy > :nth-child(2) { transition-delay: .08s; }
.js .scene.in .copy > :nth-child(3) { transition-delay: .16s; }
.js .s-solo .copy { transform: translateY(-50%); }

/* ---------- facts under a scene: plain columns of type ---------- */
.facts { max-width: var(--text); margin: 0 auto; padding: 8px 20px 0; display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 40px; }
.facts > div { border-top: 1px solid var(--line); padding-top: 22px; }
.facts b { display: block; font-size: 20px; font-weight: 650; letter-spacing: -.015em; line-height: 1.35; }
.facts p { margin: 8px 0 0; color: var(--sub); font-size: 16px; line-height: 1.6; }
.facts .tag { display: inline-block; margin-top: 12px; font-size: 13px; color: var(--dim); }
.facts .tag.on { color: var(--link); font-weight: 600; }
.block { padding: 40px 0 140px; }

/* ---------- the practical part: type on black ---------- */
.sect { max-width: var(--text); margin: 0 auto; padding: 120px 20px 0; }
.sect > .h { font-size: clamp(44px, 6vw, 88px); }
.sect > .lead { max-width: 40em; }

.steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px 56px; margin-top: 64px; }
.steps h3 { margin: 0 0 6px; font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.steps ol { list-style: none; margin: 0; padding: 0; }
.steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px; align-items: baseline; padding: 18px 0; border-top: 1px solid var(--line); scroll-margin-top: 80px; }
.steps li .no { grid-column: 1; grid-row: 1 / span 2; font-size: 28px; font-weight: 300; line-height: 1.05; color: var(--dim); }
.steps li b { grid-column: 2; font-size: 17px; font-weight: 600; line-height: 1.45; }
.steps li span:not(.no) { grid-column: 2; color: var(--sub); font-size: 15px; line-height: 1.55; }
.steps li:target { background: var(--raise); border-radius: 12px; border-top-color: transparent; padding-left: 12px; padding-right: 12px; margin: 0 -12px; }
.steps .get { margin: 4px 0 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; color: var(--dim); font-size: 14px; }
.kbd { font-weight: 600; padding: 0 6px; border-radius: 4px; background: #1C1C1E; white-space: nowrap; }

.price { text-align: center; }
.price .big { margin: 0; font-size: clamp(72px, 13vw, 200px); font-weight: 700; letter-spacing: -.05em; line-height: 1; }
.price .then { margin: 24px 0 0; font-size: clamp(26px, 3.6vw, 52px); font-weight: 700; letter-spacing: -.03em; line-height: 1.2; }
.price .facts { margin-top: 72px; text-align: left; padding: 0; }
.price .btns { margin-top: 56px; }

.help { margin-top: 48px; border-bottom: 1px solid var(--line); }
.help details { border-top: 1px solid var(--line); }
.help summary { display: flex; align-items: center; gap: 16px; min-height: 68px; padding: 14px 0; cursor: pointer; list-style: none; font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.help summary::-webkit-details-marker { display: none; }
.help summary .icon { margin-left: auto; width: 18px; height: 18px; color: var(--dim); transition: transform .3s var(--ease); }
.help details[open] summary .icon { transform: rotate(180deg); }
.help details p { margin: 0 0 22px; color: var(--sub); max-width: 64ch; }
.contact { display: flex; flex-wrap: wrap; gap: 14px 32px; margin-top: 36px; font-size: 16px; }
.contact a { display: inline-flex; align-items: center; gap: 8px; }

footer.foot { max-width: var(--text); margin: 0 auto; padding: 96px 20px 56px; color: var(--dim); font-size: 12px; line-height: 1.7; }
footer.foot a { color: var(--dim); }

/* ---------- reading page (privacy) ---------- */
.doc { max-width: 760px; margin: 0 auto; padding: 96px 20px 0; }
.doc > .h { font-size: clamp(40px, 5vw, 64px); }
.doc .lead { margin-bottom: 40px; }
.doc .sum { display: grid; gap: 0; margin: 0 0 48px; padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
.doc .sum li { border-top: 1px solid var(--line); padding: 18px 0; }
.doc .sum a { display: block; color: inherit; text-decoration: none; }
.doc .sum a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.doc .sum b { display: block; font-size: 18px; font-weight: 650; }
.doc .sum span { color: var(--sub); font-size: 15px; }
.doc h3 { font-size: 20px; font-weight: 700; letter-spacing: -.015em; margin: 44px 0 10px; scroll-margin-top: 80px; }
.doc p, .doc ul { margin: 0 0 14px; color: #D2D2D7; font-size: 16px; line-height: 1.75; }
.doc ul { padding-left: 20px; }
.doc b { color: var(--fg); }
.doc table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 6px 0 16px; color: #D2D2D7; }
.doc th, .doc td { border-top: 1px solid var(--line); padding: 12px 10px 12px 0; text-align: left; vertical-align: top; }
.doc th { color: var(--fg); font-weight: 600; }
.table-wrap { overflow-x: auto; }
.doc + .doc { padding-top: 140px; }

/* ---------- narrow: copy above each photo, the photo below it ---------- */
@media (max-width: 759px) {
  body { font-size: 16px; }
  .bar { gap: 14px; }
  .bar nav { display: none; }
  .scene { display: flex; flex-direction: column; }
  .scene .copy, .s-solo .copy, .s-dusk .copy { position: static; transform: none; text-align: center; padding: 72px 20px 4px; text-shadow: none; }
  .js .s-solo .copy { transform: none; }
  .scene > img, .s-solo > img { order: 2; margin-top: -4%; width: 100%; }
  .s-hero .copy.bottom { order: 3; padding: 0 20px; margin-top: -6%; position: relative; }
  .s-hero .copy.top { padding-top: 40px; } /* clear of the sticky bar */
  .s-dusk::after { display: none; }
  .scene .copy .lead { color: var(--sub); }
  .facts { grid-template-columns: 1fr; gap: 0; }
  .facts > div { padding: 20px 0; }
  .block { padding: 24px 0 96px; }
  .sect { padding-top: 96px; }
  .steps { grid-template-columns: 1fr; gap: 48px; margin-top: 40px; }
  .price .facts { margin-top: 48px; }
  .btns .btn { flex: 1 1 100%; }
  .doc { padding-top: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .scene:not(.s-hero) .copy > * { opacity: 1; transform: none; transition: none; }
  .btn, .help summary .icon { transition: none; }
}