:root {
  color-scheme:dark;
  --ink:#eeefe9;
  --muted:#a0a5a1;
  --bg:#090b0b;
  --accent:#c0b1ef;
  --line:#ffffff21;
  --gutter:clamp(24px,7vw,120px);
  --mono:'SFMono-Regular',Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',sans-serif
}

* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:100px
}
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased
}
h1,h2,h3,p,figure {
  margin:0
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit;
  color:inherit;
  cursor:pointer
}
img {
  max-width:100%;
  height:auto;
  display:block
}
button,a,summary {
  -webkit-tap-highlight-color:transparent
}
a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:6px
}
::selection {
  background:var(--accent);
  color:var(--bg)
}
[hidden] {
  display:none!important
}
.skip {
  position:fixed;
  top:10px;
  left:20px;
  z-index:100;
  transform:translateY(-180%);
  background:var(--ink);
  color:var(--bg);
  padding:14px 22px
}
.skip:focus {
  transform:none
}
.masthead {
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:30px var(--gutter)
}
.brand {
  font-size:29px;
  font-weight:600;
  letter-spacing:-1.8px
}
.brand>span {
  color:var(--accent)
}
.masthead nav {
  display:flex;
  align-items:center;
  gap:30px;
  font-size:13px
}
.masthead nav>a {
  color:#c7cac5
}
.masthead nav>a:hover {
  color:white
}
.language {
  font-family:var(--mono);
  font-size:11px;
  border-left:1px solid var(--line);
  padding-left:24px
}
.motion-button {
  border:1px solid var(--line);
  background:transparent;
  border-radius:50%;
  width:34px;
  height:34px;
  font-size:12px
}
.motion-button[aria-pressed=true] {
  color:var(--bg);
  background:var(--accent)
}
.hero {
  min-height: min(960px,100svh);
  padding:170px var(--gutter) 100px;
  position:relative;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  align-items:center;
  gap:24px;
  isolation:isolate;
  overflow:hidden
}
.hero::before {
  content:'';
  position:absolute;
  width:65vw;
  height:65vw;
  right:-12vw;
  top:8%;
  background:radial-gradient(ellipse,#51406b25,transparent 65%);
  z-index:-1
}
.hero-copy {
  position:relative;
  z-index:2
}
h1 {
  font-size:clamp(60px,6.8vw,112px);
  line-height:.98;
  letter-spacing:-.065em;
  font-weight:500
}
em {
  font-style:normal;
  color:var(--accent)
}
.intro {
  max-width:370px;
  color:var(--muted);
  font-size:17px;
  line-height:1.7;
  margin-top:30px
}
.actions {
  display:flex;
  align-items:center;
  gap:26px;
  margin-top:32px;
  flex-wrap:wrap
}
.text-link {
  font-size:13px;
  display:inline-flex;
  gap:20px;
  align-items:center
}
.text-link:hover {
  color:var(--accent)
}
.hero-visual {
  position:relative;
  max-width:560px;
  width:100%;
  justify-self:center;
  isolation:isolate
}
.hero-artwork {
  width:100%;
  position:relative;
  filter:drop-shadow(0 25px 50px #0006)
}
.chapter {
  padding:130px var(--gutter)
}
.section-heading .eyebrow,.result-copy>.eyebrow {
  margin-bottom:30px;
  color:var(--muted)
}
h2 {
  font-size:clamp(42px,4.8vw,76px);
  line-height:1.06;
  letter-spacing:-.055em;
  font-weight:500
}
.section-heading>p:last-child,.result-copy>p:not(.eyebrow) {
  font-size:17px;
  line-height:1.7;
  color:var(--muted);
  max-width:430px;
  margin-top:24px
}
.ritual {
  border-top:1px solid var(--line)
}
.ritual-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8vw;
  margin-top:65px;
  align-items:center
}
.stone-study {
  min-height:380px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center
}
.stone-study img {
  width:70%;
  max-width:330px;
  filter:drop-shadow(0 10px 45px #8a69d22b);
  transform:rotate(-15deg)
}
.steps {
  list-style:none;
  padding:0;
  margin:0
}
.steps li {
  display:grid;
  grid-template-columns:32px 1fr;
  gap:24px;
  border-top:1px solid var(--line);
  padding:28px 0
}
.steps h3 {
  font-size:22px;
  font-weight:500;
  letter-spacing:-.025em
}
.steps p {
  color:var(--muted);
  font-size:15px;
  line-height:1.7;
  max-width:380px;
  margin-top:12px
}
.step-number {
  font:10px var(--mono);
  color:var(--accent);
  padding-top:7px
}
.results {
  background:var(--bg);
  color:var(--ink);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9vw;
  align-items:center
}
.result-copy h2 {
  max-width:620px
}
.conversation {
  width:min(100%, 320px);
  justify-self:center;
  margin:0
}
.app-phone {
  position:relative;
  width:100%;
  aspect-ratio:1350 / 2760
}
.app-phone-screen {
  position:absolute;
  left:5.333333%;
  top:2.5%;
  width:89.333333%;
  height:auto;
  aspect-ratio:1320 / 2868;
  border-radius:16.84% / 7.74%;
  overflow:hidden;
  background:#000
}
.app-phone-screen img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain
}
.app-phone-frame {
  position:absolute;
  inset:0;
  z-index:1;
  display:block;
  width:100%;
  height:100%;
  pointer-events:none
}
.knowledge {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px 8vw
}
.knowledge>.text-link {
  grid-column:2
}
.faq details {
  border-top:1px solid var(--line)
}
.faq details:last-child {
  border-bottom:1px solid var(--line)
}
.faq summary {
  display:flex;
  justify-content:space-between;
  gap:24px;
  cursor:pointer;
  padding:25px 0;
  font-size:17px;
  line-height:1.5;
  list-style:none;
  letter-spacing:-.02em
}
.faq summary::-webkit-details-marker {
  display:none
}
.faq summary span {
  color:var(--accent);
  font-size:22px;
  font-weight:300
}
.faq details[open] summary span {
  transform:rotate(45deg)
}
.faq details p {
  font-size:15px;
  line-height:1.8;
  color:var(--muted);
  padding:0 30px 28px 0
}
.closing {
  padding:110px var(--gutter) 100px;
  text-align:center;
  position:relative;
  border-top:1px solid var(--line);
  background:radial-gradient(ellipse at 50% 100%,#45345928,transparent 60%)
}
.closing h2 {
  font-size:clamp(58px,7.4vw,110px)
}
.closing>p:not(.eyebrow) {
  margin:25px 0 30px;
  color:var(--muted);
  font-size:16px
}
.back {
  position:absolute;
  right:var(--gutter);
  bottom:45px;
  font-size:22px
}
.footer {
  padding:45px var(--gutter);
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:35px;
  flex-wrap:wrap
}
.footer nav {
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  max-width:500px;
  font-size:11px;
  color:var(--muted)
}
.footer nav a:hover {
  color:var(--ink)
}
.copyright {
  font:9px var(--mono);
  color:var(--muted)
}

/* Motion stays decorative: every section is readable before JavaScript runs. */
@media(prefers-reduced-motion:no-preference) {
  .motion-enabled .hero-artwork {
  animation:float 7s ease-in-out infinite
}
.motion-enabled .stone-study img {
  animation:stone 9s ease-in-out infinite
}
.motion-enabled .reveal {
  transition:opacity .8s,transform .8s
}
.motion-enabled .reveal.is-waiting {
  opacity:0;
  transform:translateY(22px)
}
@keyframes float {
  50% {
  transform:translateY(-12px) rotate(1deg)
}

}
@keyframes stone {
  50% {
  transform:translateY(-12px) rotate(-6deg)
}

}

}

.reduce-motion *, .reduce-motion *::before,.reduce-motion *::after {
  animation:none!important;
  transition:none!important
}
.reduce-motion {
  scroll-behavior:auto
}
.reduce-motion .reveal.is-waiting {
  opacity:1;
  transform:none
}

@media(min-width:1500px) {
  .hero {
  min-height:920px
}
.hero-visual {
  max-width:600px
}

}

@media(max-width:1000px) {
  .masthead nav {
  gap:20px
}
.hero {
  grid-template-columns:1fr 1fr;
  padding-top:150px;
  min-height:800px
}
h1 {
  font-size:clamp(55px,7.4vw,80px)
}
.hero-visual {
  width:115%;
  margin-right:-25px
}
.chapter {
  padding-top:95px;
  padding-bottom:95px
}
.results {
  gap:40px
}
.knowledge {
  grid-template-columns:1fr;
  gap:45px
}
.knowledge>.text-link {
  grid-column:1
}
.faq {
  max-width:750px
}
.stone-study {
  min-height:300px
}
.ritual-layout {
  gap:40px
}
.footer {
  align-items:flex-start
}

}

@media(max-width:650px) {
  html {
  scroll-padding-top:35px
}
.masthead {
  padding-top:24px
}
.brand {
  font-size:25px
}
.masthead nav {
  gap:18px
}
.nav-story {
  display:none
}
.masthead nav>a {
  font-size:12px
}
.language {
  padding-left:16px
}
.motion-button {
  width:30px;
  height:30px
}
.hero {
  min-height:auto;
  padding-top:145px;
  padding-bottom:90px;
  grid-template-columns:1fr;
  gap:25px
}
h1 {
  font-size:clamp(58px,12vw,82px)
}
.intro {
  font-size:16px;
  max-width:330px;
  margin-top:24px
}
.actions {
  gap:23px;
  margin-top:26px
}
.hero-visual {
  width:90%;
  max-width:360px;
  margin:5px 0 20px;
  justify-self:end
}
.chapter {
  padding-top:75px;
  padding-bottom:75px
}
h2 {
  font-size:clamp(39px,9vw,54px)
}
.section-heading>p:last-child,.result-copy>p:not(.eyebrow) {
  font-size:16px
}
.ritual-layout {
  grid-template-columns:1fr;
  margin-top:35px;
  gap:30px
}
.stone-study {
  max-width:340px;
  width:100%;
  min-height:270px;
  justify-self:center
}
.stone-study img {
  max-width:245px
}
.steps li {
  padding:25px 0;
  gap:12px
}
.steps h3 {
  font-size:21px
}
.results {
  grid-template-columns:1fr;
  gap:55px
}
.result-options {
  margin-top:25px
}
.conversation {
  max-width:360px
}
.result-text {
  font-size:22px
}
.knowledge {
  gap:35px
}
.closing {
  padding-top:80px;
  padding-bottom:100px
}
.closing h2 {
  font-size:clamp(55px,12vw,76px)
}
.closing>p:not(.eyebrow) {
  font-size:15px
}
.footer {
  gap:30px;
  padding-top:35px;
  padding-bottom:35px
}
.footer nav {
  width:100%;
  gap:16px 22px
}
.copyright {
  width:100%
}
.signal {
  font-size:10px
}
.faq summary {
  font-size:16px
}
}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto
}
*,*::before,*::after {
  animation:none!important;
  transition:none!important
}

}


/* WelcomeRockView: cyan/purple halo, 4.8-second breathing cycle. */
.stone-study {
  isolation: isolate;
}
.stone-study::before,
.stone-study::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
}
.stone-study::before {
  width: min(154%, 726px);
  aspect-ratio: 2.2 / 1.6;
  background: radial-gradient(ellipse, rgb(0 255 255 / .18), rgb(102 82 140 / .5) 45%, transparent 72%);
  filter: blur(24px);
  transform: translate(-50%, -50%) scale(1.01, 1);
  opacity: .825;
}
.stone-study::after {
  width: min(77%, 363px);
  aspect-ratio: 1.1 / .7;
  background: rgb(0 255 255 / .16);
  filter: blur(34px);
  transform: translate(-40%, -50%);
}
.stone-study img {
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .motion-enabled .stone-study.is-visible::before {
    animation: rock-halo-pulse 4.8s linear infinite;
  }
  .motion-enabled .stone-study.is-visible::after {
    animation: rock-halo-drift 14s ease-in-out infinite;
  }
  .document-hidden .stone-study::before,
  .document-hidden .stone-study::after,
  .stone-study:not(.is-visible) img {
    animation-play-state: paused;
  }
}
@keyframes rock-halo-pulse {
  0%, 50%, 100% { transform: translate(-50%, -50%) scale(1.01, 1); opacity: .825; }
  12.5%, 37.5% { transform: translate(-50%, -50%) scale(1.052, 1.057); opacity: .949; }
  25% { transform: translate(-50%, -50%) scale(1.07, 1.08); opacity: 1; }
  62.5%, 87.5% { transform: translate(-50%, -50%) scale(.968, .943); opacity: .701; }
  75% { transform: translate(-50%, -50%) scale(.95, .92); opacity: .65; }
}
@keyframes rock-halo-drift {
  0%, 100% { transform: translate(-36%, -50%); }
  25% { transform: translate(-50%, -42%); }
  50% { transform: translate(-64%, -50%); }
  75% { transform: translate(-50%, -58%); }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .motion-enabled .app-phone {
      animation:phone-scroll linear both;
      animation-timeline:view();
      animation-range:entry 0% exit 100%;
    }
  }
}
@keyframes phone-scroll {
  from { transform:translateY(30px) rotate(-3deg); }
  to { transform:translateY(-30px) rotate(3deg); }
}
.app-store-link { display:inline-block; line-height:0; transition:opacity .2s; }
.app-store-link:hover { opacity:.82; }
.app-store-link img { display:block; width:180px; height:auto; }

/* Original Apple artwork: 48px high, with 12px clear space on every side. */
.app-store-badge {
  display: inline-flex;
  align-items: center;
  padding: 12px;
  margin: -12px;
}
.app-store-badge img {
  display: block;
  height: 48px;
  width: auto;
  max-width: none;
}
.store-text-link {
  display: inline-block;
  padding: 12px 0;
  font-size: 15px;
  text-decoration: underline;
  text-underline-offset: 5px;
}
.store-text-link:hover { color: var(--accent); }

/* One story: the three steps alongside the current app result. */
.how-story {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(40px, 8vw, 130px);
  align-items: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.how-copy .steps { margin-top: 40px; }
.how-copy .section-heading > p { max-width: 450px; }
.how-story .conversation { width: 100%; }
@media (max-width: 800px) {
  .how-story { grid-template-columns: 1fr; gap: 50px; }
  .how-story .conversation { max-width: 340px; }
}
/* The iridescent layers are masked to the stone beneath Rock's stick. */
.hero-artwork { position: relative; isolation: isolate; }
.hero-artwork > img { position: relative; z-index: 1; width: 100%; }
.hero-stone-glow {
  position: absolute;
  left: 81%; top: 88%; width: 35%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse, rgb(0 255 255 / .3), rgb(102 82 140 / .4) 35%, transparent 72%);
  filter: blur(14px);
  opacity: .8;
}
.hero-stone-prism, .hero-stone-sheen {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  -webkit-mask: url('/assets/hero.webp') center / 100% 100% no-repeat;
  mask: url('/assets/hero.webp') center / 100% 100% no-repeat;
  clip-path: polygon(73% 85%,79% 82%,86% 82%,89.5% 87%,87% 92%,80% 96%,73% 93%,72% 89%);
  mix-blend-mode: screen;
}
.hero-stone-prism {
  background: linear-gradient(125deg, #74eaff, #b383f0 38%, #ffb4db 60%, #7aeeff);
  background-size: 250% 250%;
  opacity: .28;
}
.hero-stone-sheen {
  background: linear-gradient(115deg, transparent 40%, rgb(0 255 255 / .12) 45%, rgb(255 255 255 / .6) 50%, rgb(255 255 255 / .08) 55%, transparent 60%);
  background-size: 300% 100%;
  background-position: 100% 0;
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .motion-enabled .hero-artwork.is-visible .hero-stone-glow { animation: hero-stone-breathe 4.8s ease-in-out infinite; }
  .motion-enabled .hero-artwork.is-visible .hero-stone-prism { animation: hero-stone-opal 8s ease-in-out infinite alternate; }
  .motion-enabled .hero-artwork.is-visible .hero-stone-sheen { animation: hero-stone-sweep 4.8s ease-in-out infinite; }
  .document-hidden .hero-artwork, .document-hidden .hero-artwork > span,
  .hero-artwork:not(.is-visible), .hero-artwork:not(.is-visible) > span { animation-play-state: paused; }
}
@keyframes hero-stone-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(.95); opacity: .65; }
  50% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
}
@keyframes hero-stone-opal {
  from { background-position: 0% 0%; opacity: .2; }
  to { background-position: 100% 100%; opacity: .4; }
}
@keyframes hero-stone-sweep {
  0% { background-position: 100% 0; opacity: 0; }
  10% { opacity: .8; }
  46% { background-position: 0% 0; opacity: 0; }
  100% { background-position: 0% 0; opacity: 0; }
}




/* Matched closing invitations: the app and the creator's other projects. */
.closing { text-align: center; }
.closing-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(40px, 7vw, 110px);
}
.closing-panel {
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  gap: 36px;
  min-width: 0;
}
.closing h2 {
  font-size: clamp(36px, 4vw, 64px);
  line-height: 1.08;
}
.closing-action { line-height: 0; }
.portfolio-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 143.596884px;
  height: 48px;
  padding: 0 10px;
  border: 1px solid #a6a6a6;
  border-radius: 8px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.4;
}
.portfolio-button:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 750px) {
  .closing-columns { grid-template-columns: 1fr; gap: 50px; }
  .closing-panel + .closing-panel { border-top: 1px solid var(--line); padding-top: 50px; }
  .closing h2 { font-size: clamp(36px, 8vw, 56px); }
  .closing-panel { gap: 30px; }
}

/* Upcoming document checks are clearly separate from the available photo flow. */
.upcoming {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 8vw, 130px);
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.upcoming-copy { max-width: 500px; }
.upcoming-lead {
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.2;
  letter-spacing: -.035em;
}
.upcoming-copy > p + p {
  margin-top: 24px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.75;
}
@media (max-width: 800px) {
  .upcoming { grid-template-columns: 1fr; gap: 35px; }
  .upcoming-copy > p + p { font-size: 16px; }
}

.upcoming-text h2 { margin-bottom: 32px; }
.upcoming-visual { width: min(100%, 320px); justify-self: center; }
/* Camera composition follows Apple's current Camera reference: 3:4 capture
   frame, dimmed preview overflow, lens selector and glass control surfaces. */
.document-camera { container-type: inline-size; background: #1b1a18; }
.camera-viewfinder { position: absolute; top: 14.7%; left: 0; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; }
.document-camera .camera-viewfinder img { width: 100%; height: 100%; object-fit: cover; }
.camera-privacy-dot { position: absolute; top: 3.65%; left: 56%; width: 1.15%; aspect-ratio: 1; border-radius: 50%; background: #32d058; z-index: 2; }
.camera-top-controls { position: absolute; top: 8.1%; left: 41%; right: 41%; display: flex; justify-content: center; gap: 6cqw; color: white; }
.camera-top-controls > span { position: relative; width: 5.2cqw; height: 5.2cqw; flex-shrink: 0; }
.camera-top-controls svg { width: 100%; height: 100%; }
.camera-top-controls small { position: absolute; right: -1cqw; bottom: -.5cqw; font: 600 2.4cqw/1 system-ui,sans-serif; background: #727574; border-radius: 50%; padding: .3cqw; }
.camera-lenses { position: absolute; top: 68.5%; left: 24%; right: 24%; display: flex; align-items: center; justify-content: space-between; color: white; font: 500 3.5cqw/1 system-ui,sans-serif; }
.camera-lenses > span { display: grid; place-items: center; width: 9.5cqw; height: 9.5cqw; border-radius: 50%; background: #2228; }
.camera-lenses .camera-lens-selected { width: 11cqw; height: 11cqw; background: #3c3b2ecf; color: #ffdf37; font-size: 4cqw; }
.camera-capture-row { position: absolute; top: 76%; left: 0; right: 0; height: 13%; display: flex; align-items: center; justify-content: space-evenly; }
.camera-shutter { display: block; width: 20cqw; height: 20cqw; border: .65cqw solid #fff; border-radius: 50%; padding: .9cqw; background: #2227; }
.camera-shutter::after { content: ''; display: block; width: 100%; height: 100%; border-radius: 50%; background: white; }
.camera-style, .camera-settings, .camera-switch { display: grid; place-items: center; width: 12.5cqw; height: 12.5cqw; border-radius: 50%; background: #57574dbf; color: #fff; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.camera-style { font: italic 7cqw/1 Georgia,serif; }
.camera-settings svg, .camera-switch svg { width: 7cqw; height: 7cqw; }
.camera-bottom-row { position: absolute; left: 5%; right: 5%; bottom: 4.3%; height: 9%; display: flex; align-items: center; justify-content: space-between; }
.camera-thumbnail { width: 10cqw; height: 10cqw; border-radius: 50%; border: .25cqw solid #ffffff50; flex-shrink: 0; background: url('/assets/handwritten-document-camera.png') center / cover; }
.camera-modes { display: flex; align-items: center; gap: 2.5cqw; color: #ddd; font: 500 2.9cqw/1 system-ui,sans-serif; letter-spacing: .02em; }
.camera-mode-selected { color: #ffdf37; border-radius: 20cqw; padding: 3.5cqw 3cqw; background: #6d6d575e; border: .2cqw solid #ffffff24; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.camera-bottom-row .camera-switch { width: 10.5cqw; height: 10.5cqw; flex-shrink: 0; }
.camera-home-indicator { position: absolute; bottom: 1.2%; left: 35%; width: 30%; height: .65%; border-radius: 50px; background: #fff; }