*{
  box-sizing:border-box
}
html{
  scroll-behavior:smooth
}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.55
}
a{
  color:inherit;
  text-decoration:none
}
button,a,summary{
  -webkit-tap-highlight-color:transparent
}
a:focus-visible,summary:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:4px
}
img{
  max-width:100%;
  display:block
}
h1,h2,h3,p{
  margin-top:0
}
h1,h2,h3{
  line-height:1.08;
  letter-spacing:-.045em
}
h1{
  font-size:clamp(4.4rem,8vw,8.8rem);
  font-weight:800;
  margin:18px 0 25px
}
h1 em,h2 em{
  font-style:normal;
  color:var(--accent)
}
h2{
  font-size:clamp(2.3rem,4.1vw,4.8rem);
  font-weight:750;
  margin:0 0 24px
}
h3{
  font-size:1.35rem;
  margin-bottom:10px
}
p{
  color:var(--muted)
}
.site-header{
  border-bottom:1px solid var(--line);
  position:relative;
  z-index:5
}
.header-inner{
  max-width:1480px;
  margin:auto;
  padding:18px 36px;
  display:flex;
  align-items:center;
  gap:42px
}
.brand{
  display:flex;
  align-items:center;
  gap:9px;
  white-space:nowrap;
  font-weight:900;
  letter-spacing:-.08em;
  font-size:1.45rem
}
.brand img{
  width:35px;
  height:35px;
  object-fit:cover;
  object-position:left
}
.brand-slash{
  color:var(--accent)
}
.primary{
  display:flex;
  align-items:center;
  gap:30px;
  margin-left:auto
}
.primary a{
  color:var(--muted);
  font-size:.88rem;
  font-weight:700;
  transition:color .2s
}
.primary a:hover,.site-footer a:hover{
  color:var(--accent)
}
.header-cta{
  background:var(--accent);
  color:var(--on-accent);
  padding:13px 19px;
  font-size:.84rem;
  font-weight:800;
  white-space:nowrap
}
.header-cta span{
  margin-left:14px
}
.hero,.platform-hero{
  max-width:1480px;
  margin:auto;
  padding:74px 36px 80px
}
.hero{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:6%;
  align-items:center;
  min-height:680px
}
.hero-copy{
  max-width:720px
}
.eyebrow,.section-kicker{
  font-size:.74rem;
  letter-spacing:.18em;
  font-weight:800;
  color:var(--accent);
  text-transform:uppercase
}
.eyebrow{
  display:flex;
  align-items:center;
  gap:10px
}
.eyebrow-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent);
  display:inline-block
}
.hero-lead{
  font-size:clamp(1.35rem,2vw,1.75rem);
  line-height:1.4;
  color:var(--text);
  max-width:600px;
  font-weight:600
}
.hero-detail{
  max-width:535px;
  font-size:1rem
}
.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:32px 0 45px
}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  min-height:52px;
  padding:14px 21px;
  font-size:.88rem;
  font-weight:800;
  transition:transform .2s,background .2s
}
.button:hover,.header-cta:hover{
  transform:translateY(-2px)
}
.button-primary{
  background:var(--accent);
  color:var(--on-accent)
}
.button-secondary{
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--text)
}
.hero-meta{
  display:flex;
  gap:16px;
  flex-wrap:wrap
}
.hero-meta span{
  font-size:.65rem;
  letter-spacing:.11em;
  color:var(--muted);
  border-top:1px solid var(--line);
  padding-top:12px
}
.hero-visual,.platform-card{
  background:var(--visual);
  border:1px solid var(--line);
  min-height:480px;
  position:relative;
  overflow:hidden;
  box-shadow:var(--shadow)
}
.hero-visual{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between
}
.hero-visual-top,.hero-visual-bottom,.card-top,.card-bottom{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 24px;
  font-size:.67rem;
  letter-spacing:.12em;
  font-weight:800;
  color:var(--visual-muted)
}
.hero-visual-top,.card-top{
  border-bottom:1px solid var(--visual-line)
}
.hero-visual-bottom,.card-bottom{
  border-top:1px solid var(--visual-line)
}
.hero-visual img{
  width:min(50%,270px);
  aspect-ratio:1;
  object-fit:contain;
  filter:drop-shadow(0 25px 38px rgba(0,0,0,.28))
}
.window-dots{
  letter-spacing:.25em;
  color:var(--accent)
}
.content-frame{
  max-width:1480px;
  margin:auto;
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:70px;
  padding:0 36px
}
.side-index{
  align-self:start;
  position:sticky;
  top:24px;
  padding-top:60px;
  display:flex;
  flex-direction:column;
  gap:16px
}
.side-index span{
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.14em;
  color:var(--accent);
  margin-bottom:12px
}
.side-index a{
  font-size:.85rem;
  font-weight:700;
  color:var(--muted);
  padding-left:13px;
  border-left:2px solid var(--line)
}
.side-index a:hover{
  color:var(--text);
  border-color:var(--accent)
}
.content-main{
  min-width:0
}
.section{
  padding:88px 0;
  border-top:1px solid var(--line);
  scroll-margin-top:25px
}
.section-kicker{
  margin-bottom:26px
}
.split-heading{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:50px;
  align-items:start
}
.split-heading p{
  font-size:1.12rem;
  line-height:1.7;
  max-width:500px;
  padding-top:9px
}
.feature-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-top:38px
}
.feature{
  background:var(--surface);
  border:1px solid var(--line);
  padding:27px;
  min-height:225px
}
.feature-number{
  color:var(--accent);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.15em
}
.feature h3{
  margin-top:50px
}
.feature p{
  font-size:.89rem;
  margin:0
}
.section-title-row{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:15px
}
.section-title-row a,.text-link{
  font-weight:800;
  color:var(--accent);
  font-size:.88rem;
  white-space:nowrap
}
.shot-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px
}
.shot-grid figure{
  margin:0;
  background:var(--surface);
  border:1px solid var(--line);
  padding:12px
}
.shot-grid img{
  width:100%;
  aspect-ratio:1.6;
  object-fit:cover
}
.shot-grid figcaption{
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.13em;
  color:var(--muted);
  padding:15px 4px 4px
}
.guide-panel{
  display:grid;
  grid-template-columns:1fr .8fr;
  gap:50px;
  align-items:center;
  background:var(--surface);
  border:1px solid var(--line);
  padding:48px
}
.guide-panel p{
  max-width:580px;
  line-height:1.7
}
.guide-code,.launch-art{
  background:var(--code);
  color:var(--code-text);
  border:1px solid var(--visual-line);
  min-height:260px
}
.code-top{
  border-bottom:1px solid var(--visual-line);
  font-size:.69rem;
  letter-spacing:.1em;
  padding:14px 17px;
  display:flex;
  justify-content:space-between;
  color:var(--visual-muted)
}
.guide-code code{
  display:block;
  padding:35px 23px;
  font:1rem/2.15 ui-monospace,SFMono-Regular,Consolas,monospace
}
.guide-code code span{
  color:var(--accent)
}
.faq-list{
  border-top:1px solid var(--line)
}
details{
  border-bottom:1px solid var(--line);
  padding:19px 0
}
summary{
  cursor:pointer;
  list-style:none;
  font-size:1.13rem;
  font-weight:800;
  display:flex;
  justify-content:space-between;
  gap:16px
}
summary::-webkit-details-marker{
  display:none
}
summary:after{
  content:'+';
  color:var(--accent);
  font-size:1.35rem;
  line-height:1
}
details[open] summary:after{
  content:'−'
}
details p{
  max-width:680px;
  margin:14px 0 0
}
details p a{
  text-decoration:underline;
  text-decoration-color:var(--accent)
}
.verdict-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px
}
.verdict-grid>div{
  background:var(--surface);
  padding:36px;
  border:1px solid var(--line)
}
.verdict-grid h3{
  color:var(--accent)
}
.post-list{
  border-top:1px solid var(--line)
}
.post{
  display:grid;
  grid-template-columns:60px 1fr 30px;
  align-items:center;
  gap:12px;
  padding:17px 10px;
  border-bottom:1px solid var(--line);
  font-size:1.05rem;
  font-weight:700
}
.post:hover{
  background:var(--surface);
  color:var(--accent)
}
.post-index{
  font-size:.72rem;
  color:var(--accent)
}
.site-footer{
  margin-top:50px;
  padding:70px max(36px,calc((100vw - 1408px)/2)) 22px;
  background:var(--footer);
  color:var(--footer-text)
}
.footer-head{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:60px
}
.footer-head strong{
  font-size:1.9rem;
  letter-spacing:-.08em
}
.footer-head strong span{
  color:var(--accent)
}
.footer-head p{
  max-width:310px;
  color:var(--footer-muted);
  font-size:.9rem
}
.footer-columns{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:35px
}
.footer-columns>div{
  display:flex;
  flex-direction:column;
  gap:9px
}
.footer-columns b{
  font-size:.72rem;
  letter-spacing:.15em;
  color:var(--accent);
  margin-bottom:13px
}
.footer-columns a{
  color:var(--footer-muted);
  font-size:.83rem
}
.footer-bottom{
  border-top:1px solid var(--footer-line);
  margin-top:70px;
  padding-top:20px;
  display:flex;
  justify-content:space-between;
  color:var(--footer-muted);
  font-size:.72rem;
  letter-spacing:.07em
}
.breadcrumb{
  display:flex;
  gap:12px;
  color:var(--muted);
  font-size:.75rem;
  font-weight:700;
  margin-bottom:70px
}
.breadcrumb a:hover{
  color:var(--accent)
}
.platform-hero-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:8%;
  align-items:center
}
.platform-hero h1{
  font-size:clamp(4rem,7.2vw,8rem)
}
.platform-card{
  min-height:450px;
  display:flex;
  flex-direction:column
}
.card-content{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:30px 55px
}
.card-glyph{
  font:4rem ui-monospace,Consolas,monospace;
  color:var(--accent);
  line-height:1
}
.card-content strong{
  font-size:clamp(4rem,6vw,7rem);
  line-height:.9;
  letter-spacing:-.09em;
  color:var(--visual-text);
  margin:12px 0 25px
}
.card-content p{
  font-size:.82rem;
  letter-spacing:.07em;
  color:var(--visual-muted)
}
.flow{
  display:flex;
  align-items:stretch;
  gap:12px;
  margin-top:40px
}
.flow div{
  flex:1;
  display:flex;
  flex-direction:column;
  background:var(--surface);
  border:1px solid var(--line);
  padding:24px;
  min-height:155px
}
.flow b{
  color:var(--accent);
  font-size:.72rem;
  margin-bottom:22px
}
.flow strong{
  font-size:1.05rem
}
.flow span{
  font-size:.81rem;
  color:var(--muted)
}
.flow i{
  align-self:center;
  font-style:normal;
  color:var(--accent);
  font-size:1.5rem
}
.section-intro{
  max-width:650px;
  font-size:1.08rem
}
.steps{
  list-style:none;
  padding:0;
  margin:38px 0 0;
  border-top:1px solid var(--line)
}
.steps li{
  display:grid;
  grid-template-columns:100px 1fr;
  gap:20px;
  padding:28px 0;
  border-bottom:1px solid var(--line)
}
.steps li>span{
  font-size:2rem;
  letter-spacing:-.08em;
  font-weight:800;
  color:var(--accent)
}
.steps h3{
  margin:0 0 7px
}
.steps p{
  max-width:650px;
  margin:0
}
.launch-art{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:23px;
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.14em;
  color:var(--visual-muted)
}
.launch-art b{
  font:clamp(4rem,8vw,7rem) ui-monospace,Consolas,monospace;
  color:var(--accent);
  text-align:center
}
.launch-art small{
  text-align:right
}
.next-panel{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  margin-top:18px;
  background:var(--accent-soft);
  padding:30px 35px
}
.next-panel span{
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.15em;
  color:var(--accent)
}
.next-panel h3{
  font-size:1.7rem;
  margin:8px 0
}
.next-panel p{
  margin:0;
  font-size:.9rem
}
@media(max-width:1100px){
  .primary{
    gap:15px
  }
  .content-frame{
    gap:35px;
    grid-template-columns:160px 1fr
  }
  .feature-grid{
    grid-template-columns:repeat(2,1fr)
  }
  .hero,.platform-hero-grid{
    gap:4%
  }
}
@media(max-width:800px){
  .header-inner{
    padding:15px 20px;
    flex-wrap:wrap;
    gap:15px
  }
  .primary{
    order:3;
    width:100%;
    overflow-x:auto;
    gap:20px;
    padding:4px 0
  }
  .header-cta{
    margin-left:auto
  }
  .hero,.platform-hero{
    padding:55px 20px
  }
  .hero,.platform-hero-grid{
    grid-template-columns:1fr;
    gap:38px;
    min-height:0
  }
  .hero-visual,.platform-card{
    min-height:360px
  }
  .hero-visual img{
    width:190px
  }
  .content-frame{
    display:block;
    padding:0 20px
  }
  .side-index{
    display:none
  }
  .section{
    padding:60px 0
  }
  .split-heading,.guide-panel{
    grid-template-columns:1fr;
    gap:15px
  }
  .guide-panel{
    padding:30px
  }
  .footer-head{
    grid-template-columns:1fr
  }
  .site-footer{
    padding:55px 20px 25px
  }
  .breadcrumb{
    margin-bottom:45px
  }
}
@media(max-width:580px){
  h1{
    font-size:clamp(3.7rem,15vw,5.3rem)
  }
  h2{
    font-size:2.35rem
  }
  .brand{
    font-size:1.15rem
  }
  .brand img{
    width:29px;
    height:29px
  }
  .header-cta{
    padding:10px 12px;
    font-size:.72rem
  }
  .header-cta span{
    display:none
  }
  .hero-actions{
    margin-bottom:30px
  }
  .hero-visual,.platform-card{
    min-height:320px
  }
  .feature-grid,.shot-grid,.verdict-grid,.footer-columns{
    grid-template-columns:1fr
  }
  .feature{
    min-height:0
  }
  .feature h3{
    margin-top:28px
  }
  .flow{
    flex-direction:column
  }
  .flow i{
    transform:rotate(90deg)
  }
  .steps li{
    grid-template-columns:55px 1fr
  }
  .next-panel{
    display:block
  }
  .next-panel .button{
    margin-top:20px
  }
  .footer-bottom{
    display:block
  }
  .footer-bottom span{
    display:block;
    margin:6px 0
  }
}
.info-note{
  color:var(--muted);
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.15em
}
.info-list{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin:20px 0 0
}
.info-list div{
  background:var(--surface);
  border:1px solid var(--line);
  padding:23px
}
.info-list dt{
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.12em;
  color:var(--muted);
  text-transform:uppercase
}
.info-list dd{
  margin:12px 0 0;
  font-size:1.1rem;
  font-weight:800
}
.video-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px
}
.video-grid a{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:var(--surface);
  border:1px solid var(--line);
  padding:24px;
  min-height:170px
}
.video-grid a:hover{
  border-color:var(--accent)
}
.video-grid span,.resources span{
  font-size:.7rem;
  letter-spacing:.14em;
  color:var(--accent);
  font-weight:800
}
.video-grid strong{
  font-size:1.15rem;
  line-height:1.25;
  letter-spacing:-.03em
}
.download-panel{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  background:var(--accent-soft);
  padding:38px
}
.download-panel h2{
  font-size:2.6rem;
  margin:0 0 10px
}
.download-panel p{
  margin:0;
  max-width:550px
}
.resources{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:25px 0
}
.resources>div{
  background:var(--surface);
  border:1px solid var(--line);
  padding:28px
}
.resources h3{
  margin:20px 0
}
.resources a{
  color:var(--accent);
  font-size:.86rem;
  font-weight:800
}
@media(max-width:800px){
  .info-list{
    grid-template-columns:repeat(2,1fr)
  }
}
@media(max-width:580px){
  .info-list,.video-grid,.resources{
    grid-template-columns:1fr
  }
  .download-panel{
    display:block
  }
  .download-panel .button{
    margin-top:24px
  }
}
@media(max-width:580px){
  .primary{
    flex-wrap:wrap;
    overflow:visible;
    gap:6px 15px
  }
  .primary a{
    font-size:.76rem;
    padding:4px 0
  }
  .platform-hero h1{
    font-size:clamp(3rem,11vw,3.8rem)
  }
}
:root{
  --bg:#09120e;
  --text:#ecf7eb;
  --muted:#99ad9f;
  --accent:#b6f04d;
  --on-accent:#142006;
  --surface:#101c15;
  --line:#2b4030;
  --visual:#0c1710;
  --visual-text:#eafbe8;
  --visual-muted:#93ac98;
  --visual-line:#2b4030;
  --code:#07120c;
  --code-text:#d2ebd1;
  --footer:#050e08;
  --footer-text:#ecf7eb;
  --footer-muted:#879a89;
  --footer-line:#2b4030;
  --accent-soft:#182b14;
  --shadow:0 32px 70px rgba(0,0,0,.28)
}
body{
  background-image:radial-gradient(circle at 77% 7%,rgba(106,161,49,.1),transparent 32%)
}
.site-header{
  background:#09120ef2
}
.brand img{
  display:none
}
.brand:before{
  content:'>_';
  font:1.3rem ui-monospace,Consolas,monospace;
  color:var(--accent);
  padding-right:4px
}
.hero h1,.platform-hero h1{
  letter-spacing:-.085em;
  text-transform:uppercase
}
.hero h1 em,.platform-hero h1 em{
  display:block;
  color:var(--accent)
}
.hero-visual{
  border-radius:8px;
  background:repeating-linear-gradient(0deg,transparent,transparent 27px,rgba(182,240,77,.035) 28px),#0b170e;
  transform:rotate(2deg)
}
.hero-visual img{
  mix-blend-mode:screen
}
.platform-card{
  border-radius:8px;
  background:radial-gradient(circle at 70% 60%,#1c4a27,#07150d 65%)
}
.section-kicker:before{
  content:'// ';
  color:#648d58
}
.feature{
  border-radius:4px
}
.guide-panel,.next-panel{
  border-radius:8px
}
.button,.header-cta{
  border-radius:4px
}
.guide-code,.launch-art{
  border-radius:6px
}
.post:hover{
  padding-left:20px
}

/* Production integration: preserve original conversion elements. */
:root{color-scheme:dark}
.header-action{list-style:none;display:flex;margin:0;padding:0}
.header-action .header-cta{display:inline-flex;align-items:center;gap:18px}
.header-action .header-cta:after,.hero-actions .button-primary:after,.next-panel .button-primary:after{content:'↗';font-size:1.15rem;font-weight:400}
.seo-guide{font-size:1.05rem;line-height:1.8}
.seo-guide h2{font-size:clamp(1.8rem,3vw,2.6rem);margin:50px 0 20px}
.seo-guide h3{margin-top:28px}
.seo-guide a{color:var(--accent);text-decoration:underline;text-underline-offset:4px}
.retained-links{max-width:1408px;margin:30px auto;padding:0 36px;display:flex;flex-wrap:wrap;gap:20px;color:var(--muted);font-size:.85rem}
img{height:auto} .hero-visual img{height:auto}
@media(max-width:800px){.header-action{margin-left:auto}.header-action .header-cta{margin-left:0}}
@media(max-width:580px){.header-action .header-cta:after{display:none}.retained-links{padding:0 20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Restored source content uses the approved V1 typography and components. */
.hero h1 small{font-size:.32em;letter-spacing:-.045em;white-space:nowrap;vertical-align:middle}
.platform-hero h1 small{font-size:.28em;letter-spacing:-.025em;white-space:nowrap;vertical-align:middle}
.review-byline{font-size:.8rem;color:var(--muted)}
.seo-guide .source-subheading{font-size:clamp(1.8rem,3vw,2.6rem)}
.seo-guide>p img{width:100%;height:auto;border:1px solid var(--line);border-radius:4px;margin:28px 0}
.post-thumbnail{width:60px;height:46px;object-fit:cover;border-radius:3px;border:1px solid var(--line)}
.video-grid img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top;margin-bottom:20px;border:1px solid var(--line)}
.app-source-icon{width:64px;height:64px;object-fit:contain;margin-top:24px}
.footer-source-logo{width:70px;height:auto;object-fit:contain}
.footer-bottom{flex-wrap:wrap;align-items:center;gap:14px}
.source-disclaimer{font-size:.8rem!important}
.platform-seo-notes{border-top:1px solid var(--line);padding:30px 0}
@media(max-width:580px){.hero h1 small{font-size:.32em}.post-thumbnail{width:52px;height:42px}.footer-source-logo{margin:16px 0}}

/* Round 1 visual QA: V1 hero composition, with retained SEO copy. */
.home .eyebrow,.platform .eyebrow{flex-wrap:wrap}
.hero-context{
  display:inline-block;
  padding:2px 7px;
  border:1px solid var(--line);
  border-radius:3px;
  color:var(--muted);
  font-size:.6rem;
  line-height:1.4;
  letter-spacing:.1em
}
.platform .title-row{display:block;white-space:nowrap}
.home .hero{perspective:1200px}
.home .hero-visual{
  transform:rotateY(-6deg) rotateX(4deg) rotateZ(2deg);
  transform-style:preserve-3d;
  box-shadow:0 25px 50px -12px rgba(0,0,0,.7)
}
.home .hero-meta span{
  position:relative;
  border-top:0;
  padding-top:12px
}
.home .hero-meta span:before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:1px;
  background:rgba(153,173,159,.32)
}
.platform .platform-card{
  background:radial-gradient(ellipse at 70% 60%,#205331 0%,#143820 32%,#07150d 72%)
}
@media(max-width:800px){
  .home .hero-visual{transform:rotateY(-3deg) rotateX(2deg) rotateZ(2deg)}
}

/* Sticky header: always visible on scroll. */
.site-header{position:sticky;top:0;z-index:100;backdrop-filter:blur(8px)}