/* v2 — minimal, after trybehold.com's structure; NoorScroll palette and type. Loads after styles.css. */
body.v2 { background: var(--night); color: var(--cream); font-size: 16px; }
.v2 { --night: #0C1C17; --line: #F1E7D31F; --mute: #F1E7D38C; --dim: #F1E7D333; }
.v2 .grain { background-image: url(/img/grain-light.png); opacity: .035; }
.v2 h1, .v2 h2, .v2 h3 { font-family: var(--sans); font-weight: 500; letter-spacing: -0.03em; text-wrap: balance; }
.v2 .wrap { max-width: 1360px; }
.v2 .muted { color: var(--mute); }
.v2 .label { font-size: 14px; color: var(--mute); }

/* nav */
.v2 .nav { position: sticky; top: 0; z-index: 50; background: #0C1C17F7; }
.v2 .nav .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 68px; }
.v2 .nav .logo .word { font-size: 19px; }
.v2 .nav .links { display: flex; gap: 30px; font-size: 14px; }
.v2 .nav .links a { text-decoration: none; color: var(--mute); transition: color .15s; }
.v2 .nav .links a:hover { color: var(--cream); }
.v2 .nav .pill { justify-self: end; padding: 10px 18px; font-size: 14px; background: var(--cream); color: var(--night); }
.v2 .nav .pill:hover { background: #fff; }

/* hero: the room. The live sky through an arch, the app standing in its light. Colours come from sky.js. */
.v2 .room { --fg: #F1E7D3; --wall: #163F35; position: relative; overflow: hidden; color: var(--fg); background: var(--wall); height: clamp(640px, calc(100svh - 68px), 980px); transition: color .4s; }
.v2 .room-sky { position: absolute; top: 0; left: 0; height: 100%; width: 100%; }
.v2 .room-sky svg { display: block; width: 100%; height: 100%; }
.v2 .room-in { position: relative; height: 100%; display: grid; grid-template-columns: minmax(300px, 420px) 1fr auto; grid-template-rows: 1fr auto; column-gap: 48px; }
.v2 .room-copy { grid-column: 1; grid-row: 1; align-self: center; padding-bottom: 40px; }
.v2 .room .eyebrow { color: inherit; font-size: 13px; letter-spacing: .02em; opacity: .7; margin: 0 0 22px; }
.v2 .room h1 { font-size: clamp(44px, 4.6vw, 72px); line-height: .98; letter-spacing: -0.045em; margin: 0; }
.v2 .room .sub { font-size: 17px; line-height: 1.5; opacity: .75; margin: 22px 0 0; max-width: 360px; }
.v2 .room .cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.v2 .room .cta .pill { padding: 14px 22px; font-size: 15px; text-decoration: none; transition: opacity .15s, background .4s, color .4s; }
.v2 .room .cta .solid { background: var(--fg); color: var(--wall); }
.v2 .room .cta .ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 40%, transparent); }
.v2 .room .cta .pill:hover { opacity: .85; }

.v2 .room-phone { grid-column: 3; grid-row: 1 / 3; align-self: end; position: relative; display: block; margin-bottom: 4vh; margin-right: clamp(0px, 4vw, 64px); }
.v2 .room-phone .phone { display: block; height: clamp(520px, calc(100svh - 190px), 760px); width: auto; aspect-ratio: 300 / 620; border-radius: 52px; padding: 10px; background: #0B1712; box-shadow: 0 0 0 1.5px #F1E7D338, 0 50px 90px -30px #0008, 0 20px 40px -20px #0006; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.v2 .room-phone .screen { border-radius: 42px; }
.v2 .room-phone:hover .phone { transform: translateY(-6px); }
.v2 .room-phone .floor-shadow { position: absolute; left: 6%; right: 6%; bottom: -18px; height: 36px; border-radius: 50%; background: radial-gradient(closest-side, #0007, transparent); filter: blur(6px); }

.v2 .room-time { grid-column: 1; grid-row: 2; align-self: end; padding-bottom: 5vh; max-width: 340px; }
.v2 .room-time label { display: flex; align-items: baseline; gap: 10px; font-size: 13px; }
.v2 .room-time label span { opacity: .7; margin-right: auto; }
.v2 .room-time label b { font-weight: 500; font-variant-numeric: tabular-nums; }
.v2 .room-time label em { font-style: normal; opacity: .7; min-width: 52px; }
.v2 .room-time input { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; margin: 12px 0 0; background: transparent; cursor: grab; }
.v2 .room-time input:active { cursor: grabbing; }
.v2 .room-time input::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--day); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 25%, transparent); }
.v2 .room-time input::-moz-range-track { height: 6px; border-radius: 3px; background: var(--day); }
.v2 .room-time input::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7px; border-radius: 50%; background: var(--sunc, #F1E7D3); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sunc, #F1E7D3) 30%, transparent), 0 2px 6px #0005; }
.v2 .room-time input::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--sunc, #F1E7D3); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sunc, #F1E7D3) 30%, transparent), 0 2px 6px #0005; }
.v2 .room-time .dial-btns { display: flex; gap: 18px; }
.v2 .room-time .now { margin-top: 8px; background: none; border: 0; padding: 0; color: inherit; font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; opacity: .8; cursor: pointer; }

.v2 .signoff { text-align: center; margin: 0; padding: clamp(40px, 6vw, 80px) 0 clamp(20px, 2vw, 32px); overflow: hidden; color: #F1E7D31A; }

.v2 .join-row { display: grid; justify-items: center; text-align: center; gap: 12px; padding-block: clamp(72px, 9vw, 120px); }
.v2 .join-row h2 { font-size: clamp(32px, 3.6vw, 52px); line-height: 1; letter-spacing: -0.04em; }
.v2 .join-row > p { font-size: 16px; max-width: 480px; line-height: 1.5; }
.v2 .join-row [data-join] { width: min(560px, 100%); margin-top: 20px; }
.v2 .join-row .join { width: 100%; }
.v2 .join-row .platform { justify-content: center; }
.v2 .join-row .done { text-align: left; }

/* phone (shared with feature section) */
.v2 .phone { width: 290px; height: 600px; transform: none; }
.v2 .screen { padding: 22px 20px 24px; }
.v2 .scr { position: absolute; inset: 0; padding: 52px 20px 24px; display: grid; grid-template-rows: auto 1fr auto; opacity: 0; transition: opacity .5s ease; color: var(--cream); }
.v2 .scr.on { opacity: 1; }
.v2 .scr .hd { display: flex; justify-content: space-between; font-size: 11px; color: var(--mute); }
.v2 .scr .ttl { font-size: 26px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.05; margin-top: 18px; }
.v2 .scr .big { font-size: 96px; font-weight: 500; letter-spacing: -0.06em; line-height: .8; }
.v2 .scr .row { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); font-size: 13px; }
.v2 .scr .row:last-child { border-bottom: 1px solid var(--line); }
.v2 .scr .row em { font-style: normal; color: var(--mute); font-size: 12px; }
.v2 .scr .tick { color: var(--saffron); }
.v2 .scr .btn { display: block; text-align: center; background: var(--cream); color: var(--green); border-radius: 999px; padding: 12px; font-size: 13px; font-weight: 500; }
.v2 .scr .jz { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; margin-top: 14px; }
.v2 .scr .jz i { aspect-ratio: 1; display: grid; place-items: center; font-style: normal; font-size: 8px; box-shadow: inset 0 0 0 1px #F1E7D355; color: var(--mute); }
.v2 .scr .jz i.on { background: var(--saffron); color: var(--maroon); box-shadow: none; }
.v2 .scr .week { display: flex; justify-content: space-between; margin-top: 22px; }
.v2 .scr .week span { display: grid; justify-items: center; gap: 6px; font-size: 10px; color: var(--mute); }
.v2 .scr .week b { width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--saffron); }
.v2 .scr .week b.on { background: var(--saffron); }
.v2 .scr .week b.grace { box-shadow: inset 0 0 0 1.5px var(--saffron); background: repeating-linear-gradient(45deg, transparent 0 3px, #D9B88A66 3px 5px); }
.v2 .scr .ring { width: 150px; height: 150px; margin: 18px auto 0; border-radius: 50%; background: conic-gradient(var(--saffron) 0 70%, #F1E7D322 70% 100%); display: grid; place-items: center; }
.v2 .scr .ring div { width: 128px; height: 128px; border-radius: 50%; background: var(--green); display: grid; place-items: center; text-align: center; font-size: 11px; color: var(--mute); }
.v2 .scr .ring b { display: block; font-size: 34px; font-weight: 500; letter-spacing: -0.04em; color: var(--cream); }
.v2 .scr .wdg { background: #F1E7D3F0; color: var(--green); border-radius: 26px; padding: 18px; display: grid; gap: 8px; text-align: center; }
.v2 .scr .wdg .q { font-size: 30px; line-height: 1.9; white-space: nowrap; }
.v2 .scr .wdg small { font-size: 10px; opacity: .6; }
.v2 .scr .clock { text-align: center; }
.v2 .scr .clock b { display: block; font-size: 72px; font-weight: 500; letter-spacing: -0.04em; line-height: 1; }

/* manifesto + reveal */
.v2 .split { display: grid; grid-template-columns: 1fr 2.2fr; gap: 40px; padding-block: clamp(96px, 14vw, 200px); border-top: 1px solid var(--line); }
.v2 .reveal { font-size: clamp(26px, 3.1vw, 44px); line-height: 1.18; letter-spacing: -0.025em; font-weight: 500; margin: 0; }
.v2 .reveal span { color: var(--dim); transition: color .25s linear; }
.v2 .reveal span.lit { color: var(--cream); }
.v2 .reveal + .more { margin-top: 32px; display: inline-flex; gap: 8px; font-size: 15px; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }

/* sticky features */
.v2 .feat { position: relative; height: 320vh; }
.v2 .feat .stick { position: sticky; top: 68px; height: calc(100vh - 68px); display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.v2 .feat h2 { font-size: clamp(32px, 3.4vw, 48px); line-height: 1; }
.v2 .feat .phone-wrap { position: relative; height: min(640px, calc(100vh - 140px)); aspect-ratio: 290/600; display: grid; place-items: center; }
.v2 .feat .phone-wrap .phone { transform-origin: center; }
.v2 .flist { list-style: none; margin: 0; padding: 0; counter-reset: f; max-width: 340px; }
.v2 .flist li { position: relative; border-top: 1px solid var(--line); padding: 16px 0; cursor: pointer; display: grid; grid-template-columns: 34px 1fr; }
/* progress through each habit fills the line above it */
.v2 .flist li::before { content: ''; position: absolute; left: 0; top: -1px; height: 1px; width: 100%; background: var(--cream); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.v2 .flist li:last-child { border-bottom: 1px solid var(--line); }
.v2 .flist .n { font-size: 14px; color: var(--mute); }
.v2 .flist b { font-weight: 500; font-size: 15px; color: var(--mute); transition: color .2s; }
.v2 .flist p { grid-column: 2; font-size: 14px; line-height: 1.45; color: var(--mute); max-height: 0; overflow: hidden; opacity: 0; transition: max-height .4s ease, opacity .3s ease, margin .3s; }
.v2 .flist li.on b, .v2 .flist li.on .n { color: var(--cream); }
.v2 .flist li.on p { max-height: 120px; opacity: 1; margin-top: 8px; }

/* who */
.v2 .who { background: linear-gradient(180deg, #123A30 0%, #0F2E26 100%); }
.v2 .who .split { border-top: 0; }

/* promise grid */
.v2 .vgrid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.v2 .vgrid div { padding: 28px 28px 0 0; }
.v2 .vgrid div + div { padding-left: 28px; border-left: 1px solid var(--line); }
.v2 .vgrid .n { font-size: 14px; color: var(--mute); }
.v2 .vgrid b { display: block; font-weight: 500; font-size: 18px; margin: 40px 0 10px; letter-spacing: -0.01em; }
.v2 .vgrid p { font-size: 14px; color: var(--mute); line-height: 1.5; }

/* faq */
.v2 .faq details { border-top: 1px solid var(--line); }
.v2 .faq details:last-child { border-bottom: 1px solid var(--line); }
.v2 .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 22px 0; font-size: clamp(17px, 1.5vw, 20px); font-weight: 500; letter-spacing: -0.01em; }
.v2 .faq summary::-webkit-details-marker { display: none; }
.v2 .faq summary::after { content: '+'; color: var(--mute); font-weight: 400; transition: transform .2s; }
.v2 .faq details[open] summary::after { transform: rotate(45deg); }
.v2 .faq details p { padding: 0 0 24px; max-width: 640px; color: var(--mute); line-height: 1.55; }

/* end */
.v2 .end { display: grid; justify-items: center; text-align: center; padding-block: clamp(96px, 12vw, 168px) clamp(80px, 9vw, 128px); border-top: 1px solid var(--line); }
.v2 .end h2 { font-size: clamp(36px, 5vw, 72px); line-height: 1; letter-spacing: -0.045em; }
.v2 .end [data-join] { width: min(560px, 100%); margin-top: 40px; }
.v2 .end .join { width: 100%; }
.v2 .end .platform { justify-content: center; }
.v2 .end .done { text-align: left; }
.v2 .sitefoot { border-top: 1px solid var(--line); padding-block: 28px 32px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; font-size: 13px; color: var(--mute); }
.v2 .sitefoot .logo { color: var(--cream); }
.v2 .sitefoot .logo .word { font-size: 17px; }
.v2 .sitefoot nav { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.v2 .sitefoot nav a { text-decoration: none; color: var(--mute); transition: color .15s; }
.v2 .sitefoot nav a:hover { color: var(--cream); }

/* form on dark, quieter */
.v2 .dark .field { background: transparent; }
.v2 .fine { color: var(--mute); opacity: 1; }

@media (max-width: 960px) {
  .v2 .sitefoot { flex-direction: column; align-items: flex-start; }
  .v2 .nav .links { display: none; }
  .v2 .nav .wrap { grid-template-columns: 1fr auto; }
  .v2 .room { height: auto; }
  .v2 .room-in { grid-template-columns: 1fr; grid-template-rows: auto; padding-block: 48px 40px; }
  .v2 .room-copy { grid-column: 1; grid-row: 1; padding: 0; text-align: center; justify-self: center; max-width: 520px; }
  .v2 .room .sub { margin-inline: auto; }
  .v2 .room .cta { justify-content: center; }
  .v2 .room-phone { grid-column: 1; grid-row: 2; justify-self: center; margin: 150px 0 0; }
  .v2 .room .eyebrow { justify-content: center; }
  .v2 .room-in { padding-top: 36px; }
  .v2 .room-phone .phone { height: min(600px, 132vw); }
  .v2 .room-time { grid-column: 1; grid-row: 3; justify-self: center; width: 100%; padding: 44px 0 0; }
  .v2 .split { grid-template-columns: 1fr; }
  .v2 .feat { height: auto; }
  .v2 .feat .stick { position: static; height: auto; grid-template-columns: 1fr; padding-block: 72px; }
  .v2 .flist { max-width: none; }
  .v2 .flist li::before { display: none; }
  .v2 .flist p { max-height: none; opacity: 1; margin-top: 8px; }
  .v2 .flist b, .v2 .flist .n { color: var(--cream); }
  .v2 .feat .phone-wrap { justify-self: center; }
  .v2 .vgrid { grid-template-columns: 1fr 1fr; }
  .v2 .vgrid div:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 640px) {
  .v2 .giant { font-size: 21vw; }
  .v2 .vgrid { grid-template-columns: 1fr; }
  .v2 .vgrid div, .v2 .vgrid div + div { border-left: 0; padding: 24px 0 0; }
  .v2 .vgrid b { margin-top: 12px; }
  .v2 .feat .phone-wrap { height: 560px; }
}
@media (prefers-reduced-motion: reduce) {
  .v2 .reveal span { color: var(--cream); transition: none; }
  .v2 .scr { transition: none; }
}

/* live prototype screens inside the phone mocks (rendered at 390px, scaled to fit) */
.v2 .screen.live { padding: 0; background: var(--night); position: relative; }
.v2 .screen.live iframe { position: absolute; top: 0; left: 0; width: 390px; height: 844px; border: 0; transform-origin: 0 0; transform: scale(var(--s, .69)); pointer-events: none; background: var(--night); }
.v2 .screen.live iframe.scr { opacity: 0; transition: opacity .5s ease; inset: auto; }
.v2 .screen.live iframe.scr.on { opacity: 1; }
.v2 .try { display: inline-block; margin-top: 22px; font-size: 14px; color: var(--saffron); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }