/* Regletto Writing — product page. Colours are tokens, only ever mixed, never written out. */

/* ---- Hero: name, headline, then the app itself, lying back until it is scrolled into view ---- */
.hero-writing { isolation: isolate; padding-bottom: 24px; }
.hero-writing .wrap { position: relative; z-index: 1; padding-top: 64px; }
.hero-writing .b1 { right: -6%; top: -8%; width: 640px; height: 640px; }
.hero-writing .b2 { right: 30%; bottom: 10%; }
.hero-writing .b3 { left: -12%; bottom: 30%; }
.pname { display: flex; align-items: center; gap: 14px; margin-bottom: 30px; }
.appicon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 17px; background: var(--page); box-shadow: inset 0 0 0 1px var(--hair), var(--cast-up); }
.appicon .mark { width: 34px; height: 34px; }
.pname b { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; }
.pname .ver-tag { margin-left: 0; }
.hero-writing h1 { font-size: clamp(36px, 5.2vw, 64px); }
.facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 30px; font-size: 17px; color: var(--soft); }
.facts span + span::before { content: '\00B7'; margin-right: 12px; color: var(--sub); }

.stage3d { position: relative; margin-top: 64px; perspective: 1600px; }
.stage3d .halo { left: 8%; right: 8%; bottom: -4%; height: 70%; filter: blur(90px); }
.shotcard { position: relative; margin: 0; padding: 12px; border-radius: 26px; transform-origin: 50% 0; background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(1.35); backdrop-filter: blur(20px) saturate(1.35); box-shadow: var(--cast-up), 0 40px 80px -30px var(--cast-far), inset 0 0 0 1px var(--glass-edge), 0 0 0 1px var(--hair); }
.window { position: relative; border-radius: 15px; overflow: hidden; background: var(--page); box-shadow: 0 0 0 1px var(--hair); }
.window .shot-dark { display: none; }
.window img { width: 100%; height: auto; }

/* ---- Download ---- */
.dl { position: relative; overflow: hidden; isolation: isolate; padding: 96px 0 88px; }
.dl .b1 { right: auto; left: 6%; top: -30%; width: 460px; height: 460px; }
.dl .b2 { right: 4%; bottom: -40%; }
.sechead { display: flex; align-items: center; gap: 14px; }
.dlgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
/* the sheets of this page: nearly opaque, glass edge, lifted on hover */
.panelish { background: color-mix(in srgb, var(--page) 90%, transparent); box-shadow: var(--cast), inset 0 0 0 1px var(--glass-edge), 0 0 0 1px var(--hair); transition: box-shadow var(--t-state) var(--ease), opacity var(--t-enter) var(--ease), transform var(--t-enter) var(--ease); transition-delay: 0s, calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 90ms); }
.panelish:hover { box-shadow: var(--cast-up), inset 0 0 0 1px var(--glass-edge), 0 0 0 1px var(--hair); }
.os { display: grid; grid-template-columns: auto 1fr; gap: 2px 16px; align-items: center; padding: 24px; border-radius: 22px; }
.osicon { grid-row: span 2; display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 15px; background: var(--base); box-shadow: inset 0 0 0 1px var(--hair), var(--cast); transition: background-color var(--t-state) var(--ease), color var(--t-state) var(--ease); }
.osicon .ms { font-size: 28px; }
.os b { font-weight: 500; font-size: 19px; line-height: 1.3; }
.os small { font-size: 14px; color: var(--soft); line-height: 1.4; }
.os .acts { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 20px; }
.os .acts .btn { flex: 1; }
.os.you { box-shadow: var(--cast-up), inset 0 0 0 1px var(--glass-edge), 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); }
.os.you .osicon { background: var(--accent-soft); color: var(--accent); }
.os.you .btn { background: var(--accent); color: var(--page); }
.os.you .btn:hover { background: var(--accent-hover); }
.dlnote { margin-top: 22px; color: var(--soft); }

@media (max-width: 860px) {
  .hero-writing .wrap { padding-top: 40px; }
  .stage3d { margin-top: 40px; }
  .shotcard { padding: 8px; border-radius: 18px; }
  .window { border-radius: 11px; }
  .os { padding: 22px; }
}
@media (max-width: 600px) {
  .pname { margin-bottom: 24px; }
  .hero-writing h1 { font-size: clamp(30px, 8.6vw, 40px); }
  .hero-writing h1 br { display: none; }
  /* on a phone the facts wrap and a dot would start a line: they become quiet pills */
  .facts { gap: 8px; margin-top: 24px; font-size: 15px; }
  .facts span { padding: 5px 12px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 7%, transparent); }
  .facts span + span::before { content: none; }
}