@font-face{
  font-family:Oswald;
  src:url('assets/fonts/Oswald.ttf') format('truetype');
  font-weight:200 700;
  font-style:normal;
  font-display:swap
}
@font-face{
  font-family:Jakarta;
  src:url('assets/fonts/PlusJakartaSans.ttf') format('truetype');
  font-weight:200 800;
  font-style:normal;
  font-display:swap
}
:root{
  color-scheme:light;
  --paper:#FFFFFF;
  --paper-alt:#FFFFFF;
  --surface-muted:#F7F7F9;
  --ink:#18181B;
  --muted:#64646E;
  --line:#DFDFE5;
  --accent:#4D70EF;
  --on-primary:#FFFFFF;
  --link:#3657C5;
  --dark-bg:#080808;
  --dark-canvas:#101010;
  --dark-card:#181818;
  --dark-secondary:#202020;
  --dark-line:#303033;
  --dark-ink:#F5F5F7;
  --dark-muted:#A3A3AC;
  --dark-link:#9AAFFF;
  --display:Oswald,'Arial Narrow',sans-serif;
  --body:Jakarta,Arial,sans-serif
}
*{
  box-sizing:border-box
}
html{
  scroll-behavior:smooth;
  scroll-padding-top:110px
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:15px;
  line-height:1.7
}
a{
  color:inherit
}
button,input{
  font:inherit
}
img{
  max-width:100%;
  display:block
}
figure,p,h1,h2,h3{
  margin:0
}
h1,h2,h3,.brand{
  font-family:var(--display);
  line-height:1.12
}
h1,h2,h3{
  font-weight:600
}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,video:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:6px;
  border-radius:2px
}
::selection{
  background:var(--accent);
  color:var(--on-primary)
}
.wrap{
  max-width:1240px;
  margin-inline:auto;
  width:calc(100% - 80px)
}
.section{
  padding-block:90px
}
.eyebrow{
  font-size:11px;
  letter-spacing:.15em;
  text-transform:uppercase;
  font-weight:700;
  line-height:1.6
}
.centered{
  text-align:center
}
.skip-link{
  position:fixed;
  top:10px;
  left:16px;
  padding:12px 20px;
  z-index:100;
  background:var(--dark-bg);
  color:var(--dark-ink);
  transform:translateY(-200%)
}
.skip-link:focus{
  transform:none
}
.site-header{
  position:sticky;
  top:0;
  z-index:10;
  background:var(--paper);
  border-bottom:1px solid var(--line)
}
.header-inner{
  height:84px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}
.brand{
  display:inline-flex;
  gap:12px;
  align-items:center;
  text-decoration:none;
  font-weight:600;
  letter-spacing:.045em;
  font-size:25px
}
.header-inner nav{
  display:flex;
  gap:32px;
  font-size:13px;
  font-weight:600
}
.header-inner nav a{
  text-decoration:none;
  padding:10px 0;
  border-bottom:1px solid transparent
}
.header-inner nav a:hover{
  border-color:var(--accent);
  color:var(--link)
}
.launch-tag{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:11px;
  letter-spacing:.09em;
  text-transform:uppercase;
  font-weight:700;
  padding:9px 12px;
  background:var(--surface-muted);
  border:1px solid var(--line);
  border-radius:3px;
  white-space:nowrap
}
.launch-tag span,.closing-status span,.accent-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent);
  display:inline-block;
  flex-shrink:0
}
.hero{
  padding-top:58px;
  padding-bottom:70px
}
.hero-copy{
  text-align:center;
  max-width:850px;
  margin:0 auto 48px
}
.hero-copy .eyebrow{
  color:var(--muted);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  margin-bottom:20px
}
.short-rule{
  width:24px;
  height:1px;
  background:currentColor
}
h1{
  font-size:clamp(58px,6.7vw,92px);
  letter-spacing:-.025em;
  line-height:1.05
}
.hero-description{
  font-size:16px;
  line-height:1.8;
  color:var(--muted);
  margin:24px auto 22px
}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  border:1px solid var(--dark-bg);
  border-radius:3px;
  text-decoration:none;
  font-size:14px;
  font-weight:700;
  min-height:48px;
  padding:10px 23px;
  box-shadow:3px 3px 0 var(--dark-bg);
  transition:transform .15s,box-shadow .15s
}
.button:hover{
  transform:translate(-1px,-1px);
  box-shadow:4px 4px 0 var(--dark-bg)
}
.button:active{
  transform:translate(2px,2px);
  box-shadow:1px 1px 0 var(--dark-bg)
}
.button span{
  font-size:22px;
  line-height:1
}
.primary{
  background:var(--accent);
  color:var(--on-primary)
}
.launch-note{
  font-size:11px;
  color:var(--muted);
  margin-top:18px
}
.preview-deck{
  color-scheme:dark;
  background:var(--dark-card);
  padding:24px 30px 20px;
  border-radius:5px;
  color:var(--dark-ink);
  box-shadow:0 10px 22px #08080820;
  border:1px solid var(--dark-line)
}
.deck-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--dark-line);
  padding-bottom:18px;
  gap:14px
}
.deck-header .eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:10px;
  color:var(--dark-ink)
}
.accent-dot{
  background:var(--accent)
}
.concept-label{
  font-size:10px;
  color:var(--dark-muted);
  border:1px solid var(--dark-line);
  padding:3px 8px;
  border-radius:2px;
  white-space:nowrap
}
.transformation{
  display:grid;
  grid-template-columns:minmax(0,1fr) 80px minmax(0,1fr);
  align-items:start;
  padding:22px 0 24px
}
.moment-panel,.book-panel{
  display:contents
}
.moment-photo,.book-stage{
  grid-row:1;
  aspect-ratio:4/3
}
.moment-photo{
  grid-column:1;
  position:relative;
  overflow:hidden;
  border-radius:3px;
  background:var(--dark-bg)
}
.transform-arrow{
  grid-column:2;
  grid-row:1;
  align-self:center;
  justify-self:center
}
.arrow{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border:1px solid var(--accent);
  color:var(--dark-link);
  border-radius:50%
}
.arrow svg{
  display:block;
  width:24px;
  height:24px;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round
}
.book-stage{
  grid-column:3;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--dark-canvas);
  border:1px solid var(--dark-line);
  border-radius:3px;
  padding:24px;
  overflow:hidden;
  perspective:1200px
}
.paper-book{
  position:relative;
  width:100%;
  aspect-ratio:2/1;
  background:#fff;
  box-shadow:0 2px #c4c4c4,1px 4px #fff,1px 6px #bbb,2px 8px #fff,2px 10px #aaa,3px 16px 18px #0006;
  perspective:1000px;
  container-type:inline-size
}
.book-surface,.turning-leaf{
  position:absolute;
  inset:0
}
.book-surface{
  background:#fff;
  overflow:hidden
}
.book-surface::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,#0003,transparent 2%,#0001 3%,transparent 6%)
}
.book-surface.is-back-cover::after{
  background:linear-gradient(270deg,#0003,transparent 2%,#0001 3%,transparent 6%)
}
.book-surface canvas{
  display:block;
  width:100%;
  height:100%
}
.photo-cover{
  position:absolute;
  inset:0;
  overflow:hidden;
  color:#fff;
  --cover-title-color:#c5caff
}
.photo-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block
}
.photo-cover::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(#03091988,transparent 40%,#030919cc)
}
.cover-brand,.cover-title,.cover-domain{
  position:absolute;
  z-index:1
}
.cover-brand{
  left:5%;
  top:7%;
  font-family:var(--display);
  font-weight:700;
  font-size:13cqw;
  line-height:1;
  letter-spacing:-.035em
}
.photo-cover[data-cover="front"] .cover-brand{
  font-size:15cqw;
  transform-origin:left top;
  transform:perspective(100cqw) rotateY(24deg) scaleX(1.12)
}
.cover-title{
  left:5%;
  right:5%;
  bottom:15%;
  color:var(--cover-title-color);
  font-size:3.2cqw;
  font-weight:700;
  line-height:1.25;
  letter-spacing:.12em;
  text-transform:uppercase;
  overflow-wrap:anywhere
}
.cover-domain{
  left:5%;
  bottom:7%;
  font-size:2.6cqw;
  line-height:1;
  letter-spacing:.08em
}
.photo-cover--back img{
  position:absolute;
  max-width:none;
  width:266.6667%;
  height:300%;
  left:0;
  top:-91.6667%
}
.turning-leaf{
  transform-origin:left center;
  transform-style:preserve-3d;
  pointer-events:none;
  z-index:2
}
.turning-leaf .book-surface{
  backface-visibility:hidden
}
.turning-leaf::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#e1e1e1,#fff 10%);
  transform:rotateY(180deg);
  backface-visibility:hidden
}
#sample-description{
  grid-column:1;
  grid-row:2
}
.page-controls{
  grid-column:3;
  grid-row:2
}
.book-panel noscript{
  grid-column:3
}
.deck-footer{
  border-top:1px solid var(--dark-line);
  padding-top:15px;
  display:flex;
  justify-content:space-between;
  gap:15px;
  font-size:11px;
  color:var(--dark-ink)
}
.deck-footer span:last-child{
  font-size:10px;
  color:var(--dark-muted)
}
.section-heading{
  margin-bottom:38px
}
.section-heading .eyebrow{
  color:var(--muted);
  margin-bottom:12px
}
h2{
  font-size:clamp(34px,3.6vw,48px);
  letter-spacing:-.015em
}
.section-heading>p:last-child{
  margin-top:15px;
  color:var(--muted);
  font-size:14px
}
.how-section{
  background:var(--paper-alt);
  border-block:1px solid var(--line)
}
.steps{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  margin:0;
  padding:0
}
.steps li{
  background:var(--paper);
  border:1px solid var(--line);
  box-shadow:3px 3px 0 var(--line);
  padding:27px 25px 20px;
  display:flex;
  flex-direction:column;
  align-items:flex-start
}
.step-number{
  background:var(--accent);
  color:var(--on-primary);
  font-family:var(--display);
  font-size:24px;
  line-height:1;
  width:38px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:2px;
  margin-bottom:23px
}
h3{
  font-size:24px
}
.steps p{
  font-size:14px;
  line-height:1.85;
  margin-top:13px;
  color:var(--muted);
  margin-bottom:26px
}
.step-foot{
  font-size:10px;
  color:var(--muted);
  border-top:1px solid var(--line);
  padding-top:13px;
  margin-top:auto;
  display:block;
  width:100%
}
.split{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:45px
}
.split>p:last-child{
  max-width:345px;
  margin:0;
  font-size:14px;
  line-height:1.9
}
.inspiration-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px
}
.story-card{
  border:1px solid var(--line);
  background:var(--paper);
  box-shadow:2px 2px 0 var(--dark-bg)
}
.story-image{
  aspect-ratio:4/3;
  position:relative;
  overflow:hidden
}
.story-image img{
  width:100%;
  height:100%;
  object-fit:cover
}
.story-image>span{
  position:absolute;
  bottom:10px;
  left:10px;
  background:var(--dark-bg);
  color:var(--dark-ink);
  font-size:9px;
  padding:3px 7px;
  letter-spacing:.025em;
  border-radius:2px
}
.story-card figcaption{
  padding:24px 20px 26px
}
.story-card .eyebrow{
  font-size:9px;
  letter-spacing:.095em;
  margin-bottom:10px;
  color:var(--muted)
}
.story-card h3{
  font-size:26px
}
.story-card figcaption>p:last-child{
  font-size:13px;
  margin-top:11px;
  color:var(--muted)
}
.gallery-note{
  color:var(--muted);
  font-size:11px;
  text-align:center;
  margin-top:25px
}
.faq-section{
  background:var(--paper-alt);
  border-top:1px solid var(--line)
}
.faq-wrap{
  max-width:870px
}
.faqs{
  display:grid;
  gap:10px
}
.faqs details{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:2px
}
.faqs summary{
  padding:22px 25px;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  font-size:15px;
  font-weight:700;
  list-style:none
}
.faqs summary::-webkit-details-marker{
  display:none
}
.faqs summary>span{
  font-size:24px;
  font-weight:400;
  line-height:1;
  color:var(--link);
  transition:transform .2s
}
.faqs details[open] summary>span{
  transform:rotate(45deg)
}
.faqs details[open] summary{
  padding-bottom:12px
}
.faqs details>div{
  padding:0 65px 23px 25px;
  font-size:14px;
  color:var(--muted);
  line-height:1.9
}
.contact-section{
  border-top:1px solid var(--line)
}
.contact-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:32px;
  flex-wrap:wrap
}
.contact-inner .eyebrow{
  margin-bottom:12px;
  color:var(--muted)
}
.contact-inner h2+p{
  margin-top:16px;
  color:var(--muted)
}
.contact-details{
  display:grid;
  gap:10px;
  font-style:normal
}
.contact-details>span{
  font-size:20px;
  font-weight:700
}
.contact-details a{
  text-underline-offset:5px;
  padding-block:8px
}
.contact-details a:hover{
  color:var(--link)
}
.closing{
  background:var(--dark-bg);
  color:var(--dark-ink);
  padding-block:78px 88px
}
.closing-mark{
  display:grid;
  place-items:center;
  border:1px solid var(--dark-line);
  border-radius:3px;
  width:45px;
  height:48px;
  margin:0 auto 23px;
  color:var(--dark-link);
  font-size:30px;
  box-shadow:3px 3px 0 var(--dark-secondary)
}
.closing .eyebrow{
  color:var(--dark-muted);
  margin-bottom:12px
}
.closing h2{
  font-size:clamp(38px,4vw,54px)
}
.closing h2+p{
  font-size:14px;
  line-height:1.9;
  color:var(--dark-muted);
  margin-top:20px
}
.closing-status{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:28px;
  font-size:12px;
  border:1px solid var(--dark-line);
  padding:10px 16px;
  border-radius:3px;
  color:var(--dark-ink)
}
.closing-status span{
  background:var(--accent)
}
.site-footer{
  background:var(--dark-bg);
  color:var(--dark-ink);
  border-top:1px solid var(--dark-line)
}
.footer-inner{
  min-height:96px;
  display:flex;
  align-items:center;
  gap:28px
}
.footer-inner .brand{
  font-size:21px
}
.footer-inner p{
  color:var(--dark-muted);
  font-size:11px
}
.back-top{
  font-size:11px;
  margin-left:auto;
  text-decoration:none;
  padding:12px 0
}
.back-top:hover{
  text-decoration:underline
}
.back-top span{
  margin-left:8px
}
@media(min-width:1500px){
  .hero{
    padding-top:70px
  }
  .hero-copy{
    margin-bottom:54px
  }
}
@media(max-width:1000px){
  .wrap{
    width:calc(100% - 48px)
  }
  .header-inner nav{
    gap:20px
  }
  .preview-deck{
    padding:22px
  }
  .transformation{
    grid-template-columns:1fr 70px 1fr
  }
  .book-stage{
    padding:15px 18px 23px
  }
  .steps li{
    padding:22px 18px
  }
  .steps,.inspiration-grid{
    gap:16px
  }
  .story-card figcaption{
    padding:20px 15px
  }
  .story-card h3{
    font-size:23px
  }
}
@media(max-width:700px){
  html{
    scroll-padding-top:128px
  }
  .wrap{
    width:calc(100% - 36px)
  }
  .section{
    padding-block:60px
  }
  .header-inner{
    height:auto;
    min-height:98px;
    flex-wrap:wrap;
    gap:6px 16px;
    padding-block:12px
  }
  .brand{
    font-size:23px
  }
  .launch-tag{
    margin-left:auto;
    font-size:9px;
    padding:6px 8px
  }
  .header-inner nav{
    order:3;
    width:100%;
    justify-content:center;
    gap:20px;
    font-size:11px
  }
  .header-inner nav a{
    padding:4px 0
  }
  .hero{
    padding-top:38px;
    padding-bottom:46px
  }
  .hero-copy{
    margin-bottom:32px
  }
  .hero-copy .eyebrow{
    font-size:9px;
    margin-bottom:19px
  }
  h1{
    font-size:clamp(49px,10vw,70px);
    line-height:1.08
  }
  .hero-description{
    font-size:13px;
    margin:20px auto
  }
  .button{
    font-size:12px;
    min-height:46px;
    gap:25px;
    padding:10px 18px
  }
  .launch-note{
    font-size:10px
  }
  .preview-deck{
    padding:18px 16px
  }
  .deck-header{
    align-items:flex-start;
    padding-bottom:14px;
    gap:10px
  }
  .deck-header .eyebrow{
    font-size:8px;
    letter-spacing:.09em;
    max-width:180px
  }
  .concept-label{
    font-size:8px;
    padding:2px 5px
  }
  .transformation{
    grid-template-columns:1fr;
    padding:18px 0
  }
  .moment-panel,.book-panel{display:block}
  .transform-arrow{grid-column:auto;grid-row:auto;justify-self:center;margin:18px 0}
  .transform-arrow .arrow{
    transform:rotate(90deg);
    width:28px;
    height:28px
  }
  .transform-arrow .arrow svg{
    width:18px;
    height:18px
  }
  .moment-photo{
    aspect-ratio:16/10
  }
  .book-stage{
    aspect-ratio:16/10;
    padding:22px 28px 30px
  }
  .deck-footer{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:4px;
    font-size:10px
  }
  .deck-footer span:last-child{
    font-size:8px
  }
  .section-heading{
    margin-bottom:28px
  }
  .section-heading .eyebrow{
    font-size:9px
  }
  h2{
    font-size:34px
  }
  .section-heading>p:last-child{
    font-size:13px
  }
  .steps,.inspiration-grid{
    grid-template-columns:1fr;
    gap:19px
  }
  .steps li{
    padding:24px
  }
  .step-number{
    margin-bottom:19px
  }
  .steps p{
    margin-bottom:20px;
    font-size:14px
  }
  .step-foot{
    font-size:11px
  }
  .split{
    display:block
  }
  .split>p:last-child{
    margin-top:20px;
    max-width:none
  }
  .story-card figcaption{
    padding:24px
  }
  .story-card h3{
    font-size:28px
  }
  .story-card .eyebrow{
    font-size:10px
  }
  .story-card figcaption>p:last-child{
    font-size:14px
  }
  .gallery-note{
    font-size:10px;
    margin-top:22px
  }
  .faqs summary{
    padding:19px 17px;
    font-size:13px;
    gap:10px
  }
  .faqs details>div{
    padding:0 36px 20px 17px;
    font-size:13px
  }
  .closing{
    padding-block:60px
  }
  .closing h2{
    font-size:38px
  }
  .closing h2+p{
    font-size:13px
  }
  .closing-status{
    font-size:11px
  }
  .footer-inner{
    padding-block:25px;
    flex-wrap:wrap;
    gap:10px 20px
  }
  .footer-inner .brand{
    font-size:20px
  }
  .footer-inner p{
    font-size:10px;
    order:3;
    width:100%
  }
  .back-top{
    font-size:10px
  }
}
@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto
  }
  *,*::before,*::after{
    transition:none!important;
    animation:none!important
  }
}
.header-inner .brand{
  position:relative;
  padding:4px
}
.header-inner .brand-logo{
  clip-path:inset(0 61.5% 0 0)
}
.header-inner .brand::after{
  content:"";
  position:absolute;
  inset:4px;
  pointer-events:none;
  background:var(--ink);
  clip-path:inset(0 0 0 38.5%);
  -webkit-mask:url("assets/flipnotic-wordmark-white-v3.png") center/cover no-repeat;
  mask:url("assets/flipnotic-wordmark-white-v3.png") center/cover no-repeat
}
.brand-logo{
  width:200px;
  height:50px;
  object-fit:cover;
  border-radius:2px
}
@media(max-width:700px){
  .brand-logo{
    width:138px;
    height:40px
  }
}
.story-image img {
  transform: scale(1.08);
}

[hidden]{
  display:none!important
}
.moment-photo video{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain
}
.sample-description{
  font-size:11px;
  line-height:1.7;
  color:var(--dark-ink);
  margin-top:14px
}
.page-controls{
  margin-top:14px
}
.page-controls>div{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:11px;
  color:var(--dark-ink)
}
.page-controls input{
  display:block;
  width:100%;
  min-height:32px;
  margin:4px 0 0;
  accent-color:var(--accent);
  cursor:pointer
}
.deck-footer a{
  text-underline-offset:3px
}

[hidden]{display:none!important}