:root {
  --bg:#15130e;
  --panel:#242017;
  --muted:#bcb5a6;
  --green:#ffd43b;
  --text:#f7f3e9;
  --line:#443e30;
  color-scheme:dark
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:32px
}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.6 'xVf',sans-serif
}
a {
  color:inherit;
  text-decoration:none
}
button,input,select {
  font:inherit
}
button,a,input,select,summary {
  -webkit-tap-highlight-color:transparent
}
button,a,summary {
  touch-action:manipulation
}
button {
  cursor:pointer
}
button:disabled {
  cursor:not-allowed;
  opacity:.6
}
a:focus-visible,button:focus-visible,summary:focus-visible,select:focus-visible {
  outline:3px solid var(--green);
  outline-offset:6px
}
.wrap {
  width:min(1180px,calc(100% - 80px));
  margin:auto
}
.preview {
  background:#3d3318;
  text-align:center;
  padding:9px 20px;
  color:#f3e8c0;
  font-size:12px;
  letter-spacing:1px
}
.preview span {
  letter-spacing:0;
  margin-left:16px;
  color:#c9bf9e
}
header {
  height:104px;
  display:flex;
  align-items:center;
  justify-content:space-between
}
.brand {
  font-family:'xVf',sans-serif;
  display:flex;
  align-items:center;
  gap:9px;
  font-size:28px;
  font-weight:700;
  letter-spacing:-1px
}
.brand-icon {
  background:var(--green);
  color:var(--bg);
  font-size:17px;
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:8px
}
.brand-dot {
  font-size:12px;
  align-self:flex-start;
  line-height:2
}
nav {
  display:flex;
  align-items:center;
  gap:34px;
  font-size:14px
}
nav>a:not(.button) {
  color:#ccc5b5
}
.button {
  background:var(--green);
  border:1px solid var(--green);
  color:var(--bg);
  padding:17px 23px;
  display:inline-flex;
  gap:28px;
  align-items:center;
  justify-content:center;
  font-weight:700;
  border-radius:7px;
  line-height:1.4;
  transition:background .2s,transform .2s
}
.button:hover {
  background:#ffe477;
  transform:translateY(-2px)
}
.button span {
  font-size:21px;
  line-height:1
}
.button.small {
  padding:12px 18px;
  font-size:14px
}
.hero {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:70px;
  padding-top:55px;
  padding-bottom:85px;
  align-items:center
}
.eyebrow {
  font-size:12px;
  font-weight:700;
  letter-spacing:2px;
  color:var(--green);
  margin:0 0 24px;
  display:flex;
  align-items:center;
  gap:12px
}
.line {
  height:1px;
  width:28px;
  background:var(--green)
}
h1,h2,h3,p {
  margin-top:0
}
h1,h2,h3 {
  font-family:'xVf',sans-serif
}
h1 {
  font-size:clamp(58px,6.8vw,88px);
  line-height:1.03;
  letter-spacing:-5px;
  margin-bottom:26px
}
em {
  font-style:normal;
  color:var(--green)
}
.intro {
  color:var(--muted);
  max-width:460px;
  font-size:17px;
  line-height:1.7;
  margin-bottom:28px
}
.hero-actions {
  display:flex;
  gap:22px;
  align-items:center;
  flex-wrap:wrap
}
.text-link {
  font-size:14px;
  border-bottom:1px solid #927b41;
  padding-bottom:4px
}
.micro {
  font-size:12px;
  color:#c0b295;
  margin:23px 0 0
}
.micro span {
  margin:0 9px
}
.access-panel {
  background:#242017;
  border:1px solid #50462c;
  border-radius:18px;
  padding:26px;
  transform:rotate(2deg);
  box-shadow:0 24px 65px #0003
}
.panel-head {
  display:flex;
  justify-content:space-between;
  gap:16px;
  font-size:10px;
  font-weight:700;
  letter-spacing:1.4px;
  color:#d0c8b2;
  margin-bottom:34px
}
.old-access {
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid #574f3d;
  border-radius:8px;
  padding:13px;
  color:#b8b0a0;
  font-size:14px
}
.old-access>span:last-child {
  margin-left:auto
}
.search-icon {
  font-size:24px;
  line-height:1
}
.old-caption {
  font-size:12px;
  text-align:center;
  color:#a59a83;
  margin:11px 0
}
.connector {
  text-align:center;
  color:#aa9b75;
  font-size:29px;
  margin:9px 0 17px
}
.direct-access {
  background:var(--green);
  color:var(--bg);
  border-radius:12px;
  padding:27px
}
.direct-top {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:10px;
  letter-spacing:1.5px;
  font-weight:700
}
.mini-logo {
  font-size:16px
}
 .direct-access h2 {
  font-size:41px;
  line-height:1.1;
  letter-spacing:-1.5px;
  margin:23px 0 16px
}
.direct-access p {
  font-size:14px;
  max-width:270px;
  color:#574515;
  line-height:1.6
}
.app-link {
  border-top:1px solid #bb941c;
  display:flex;
  justify-content:space-between;
  padding-top:16px;
  margin-top:24px;
  font-size:14px;
  font-weight:700
}
.panel-foot {
  display:flex;
  flex-direction:column;
  gap:7px;
  font-size:10px;
  letter-spacing:1.1px;
  margin-top:24px;
  text-align:center
}
.panel-foot>span {
  color:#a39679;
  text-decoration:line-through
}
.panel-foot strong {
  color:#e9ddbc
}
.ribbon {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:25px 0
}
.ribbon .wrap {
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:#d0bf91;
  font-family:'xVf';
  font-size:14px;
  letter-spacing:2px
}
.section {
  padding-top:96px;
  padding-bottom:96px
}
h2 {
  font-size:42px;
  letter-spacing:-1.8px;
  line-height:1.15;
  margin-bottom:24px
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px
}
.section-heading>p {
  font-size:15px;
  color:var(--muted);
  margin-bottom:30px
}
.benefits {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
  margin-top:34px
}
.benefits article {
  position:relative;
  border-top:1px solid #695a36;
  padding-top:25px
}
.number {
  position:absolute;
  right:0;
  top:30px;
  color:#ae9e78;
  font-size:12px
}
.feature-symbol {
  color:var(--green);
  font-size:33px;
  line-height:1.3;
  margin-bottom:24px
}
.benefits h3 {
  font-size:23px;
  letter-spacing:-.7px;
  margin-bottom:12px
}
.benefits p {
  font-size:15px;
  color:var(--muted);
  max-width:320px;
  line-height:1.8
}
.install {
  background:#231f17;
  border-top:1px solid #463d2c;
  border-bottom:1px solid #463d2c
}
.install-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px
}
.install h2 {
  font-size:55px;
  letter-spacing:-2px
}
.steps {
  list-style:none;
  padding:0;
  margin:0
}
.steps li {
  display:flex;
  gap:24px;
  padding:26px 0;
  border-bottom:1px solid #4a412e
}
.steps li:first-child {
  padding-top:0
}
.steps li>span {
  flex-shrink:0;
  display:grid;
  place-items:center;
  width:37px;
  height:37px;
  border:1px solid #806b35;
  border-radius:50%;
  color:var(--green);
  font-size:14px
}
.steps h3 {
  font-size:21px;
  margin:2px 0 8px
}
.steps p {
  color:var(--muted);
  font-size:15px;
  margin-bottom:0
}
.registration {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
  align-items:center
}
.registration h2 {
  font-size:58px;
  letter-spacing:-2.5px
}
.registration-copy>p:not(.eyebrow) {
  color:var(--muted);
  max-width:320px
}
.registration-note {
  display:flex;
  gap:17px;
  border-top:1px solid var(--line);
  padding-top:27px;
  max-width:330px;
  margin-top:36px
}
.registration-note>span {
  color:var(--green);
  font-size:25px
}
.registration-note p {
  font-size:14px;
  color:var(--muted)
}
.registration-note strong {
  color:var(--text);
  font-weight:500
}
.form-card {
  border:1px solid #54472b;
  border-radius:14px;
  padding:34px;
  background:#252117
}
.form-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px
}
.form-heading h3 {
  font-size:28px;
  margin:0;
  letter-spacing:-.9px
}
.form-heading > span {
  font-size:10px;
  letter-spacing:1px;
  border:1px solid #7c693a;
  border-radius:4px;
  padding:4px 7px;
  color:#ddcda3
}
.form-description {
  font-size:14px;
  color:var(--muted);
  margin:8px 0 24px
}
label {
  display:block;
  font-size:14px;
  margin:20px 0 8px
}
input,select {
  width:100%;
  min-width:0;
  background:#19160f;
  border:1px solid #655637;
  border-radius:6px;
  padding:13px 14px;
  color:var(--text);
  outline:none
}
input:focus,select:focus {
  border-color:var(--green);
  box-shadow:0 0 0 2px #ffd43b26
}
input::placeholder {
  color:#a99d83
}
.password-wrap {
  position:relative
}
.password-wrap input {
  padding-right:70px
}
.password-wrap button {
  position:absolute;
  right:5px;
  top:5px;
  bottom:5px;
  background:transparent;
  border:0;
  color:var(--green);
  padding:0 12px;
  font-size:13px
}
.field-help {
  font-size:12px;
  color:#bcb198;
  margin:8px 0 22px
}
.field-error,.form-banner {
  font-size:13px;
  color:#f2a18d;
  margin:6px 0 0
}
.form-banner {
  margin:0 0 8px
}
.submit {
  width:100%;
  justify-content:space-between
}
.form-footnote {
  font-size:12px;
  text-align:center;
  color:#c3b89f;
  margin:16px 0 0;
  line-height:1.6
}
.result {
  padding:25px 0;
  text-align:center
}
.result p {
  color:var(--muted);
  font-size:15px
}
.result-icon {
  color:var(--green);
  font-size:42px
}
.result h3 {
  font-size:28px
}
.text-button {
  display:block;
  margin:20px auto 0;
  background:none;
  border:0;
  border-bottom:1px solid #b6a16c;
  color:var(--text);
  font-size:14px
}
.faq {
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:75px;
  border-top:1px solid var(--line);
  padding-top:70px
}
.faq h2 {
  font-size:38px
}
.questions details {
  border-bottom:1px solid var(--line)
}
summary {
  padding:22px 28px 22px 0;
  font-size:16px;
  cursor:pointer;
  list-style:none;
  position:relative
}
summary::-webkit-details-marker {
  display:none
}
summary:after {
  content:'+';
  position:absolute;
  right:1px;
  color:var(--green);
  font-size:22px;
  top:15px
}
details[open] summary:after {
  content:'−'
}
.questions p {
  font-size:14px;
  color:var(--muted);
  padding-right:24px;
  padding-bottom:12px;
  line-height:1.8
}
footer {
  border-top:1px solid var(--line);
  padding:32px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px
}
footer p,footer>span {
  font-size:12px;
  color:var(--muted);
  margin:0
}
.mobile-cta {
  display:none
}
[hidden] {
  display:none!important
}
@media(min-width:1600px) {
  .hero {
    padding-top:85px;
    padding-bottom:110px
  }
  
}
@media(max-width:1000px) {
  .wrap {
    width:calc(100% - 48px)
  }
  .hero {
    gap:30px
  }
  h1 {
    letter-spacing:-3px
  }
  .hero-actions {
    gap:15px
  }
  .install-grid,.registration {
    gap:45px
  }
  .direct-access {
    padding:22px
  }
  .direct-access h2 {
    font-size:35px
  }
  .section-heading>p {
    display:none
  }
  .registration h2 {
    font-size:48px
  }
  .form-card {
    padding:25px
  }
  nav {
    gap:20px
  }
  
}
@media(max-width:700px) {
  .wrap {
    width:calc(100% - 40px)
  }
  .preview {
    font-size:10px;
    padding:7px 12px
  }
  .preview span {
    display:block;
    margin:2px 0 0;
    font-size:10px
  }
  header {
    height:82px
  }
  .brand {
    font-size:25px
  }
  nav>a:not(.button) {
    display:none
  }
  .button.small {
    font-size:12px;
    padding:11px 14px
  }
  .hero {
    grid-template-columns:1fr;
    padding-top:28px;
    padding-bottom:48px;
    gap:46px
  }
  .eyebrow {
    font-size:10px;
    letter-spacing:1.5px;
    margin-bottom:21px
  }
  h1 {
    font-size:clamp(56px,13.4vw,82px);
    letter-spacing:-3.5px
  }
  .intro {
    font-size:16px;
    max-width:420px
  }
  .hero-actions {
    align-items:flex-start;
    flex-direction:column;
    gap:20px
  }
  .hero-actions>.button {
    width:100%;
    justify-content:space-between
  }
  .micro {
    font-size:11px
  }
  .access-panel {
    transform:none;
    padding:22px
  }
  .panel-head {
    margin-bottom:22px
  }
  .direct-access h2 {
    font-size:39px
  }
  .panel-foot {
    flex-direction:row;
    justify-content:space-between;
    flex-wrap:wrap;
    font-size:9px
  }
  .ribbon {
    padding:19px 0
  }
  .ribbon .wrap {
    gap:15px;
    justify-content:center;
    font-size:10px;
    letter-spacing:1px
  }
  .ribbon span:last-child {
    display:none
  }
  .section {
    padding-top:60px;
    padding-bottom:60px
  }
  h2 {
    font-size:34px;
    letter-spacing:-1.5px
  }
  .benefits {
    grid-template-columns:1fr;
    gap:23px;
    margin-top:15px
  }
  .benefits article {
    padding-top:22px
  }
  .feature-symbol {
    margin-bottom:16px
  }
  .benefits p {
    max-width:none;
    margin-bottom:0
  }
  .benefits h3 {
    font-size:24px
  }
  .install-grid,.registration,.faq {
    grid-template-columns:1fr;
    gap:35px
  }
  .install h2 {
    font-size:46px
  }
  .steps li {
    gap:20px
  }
  .registration h2 {
    font-size:46px
  }
  .registration-note {
    display:none
  }
  .registration-copy>p:not(.eyebrow) {
    margin-bottom:0
  }
  .form-card {
    padding:24px 20px
  }
  .faq h2 {
    font-size:34px
  }
  .faq>div>h2 {
    margin-bottom:0
  }
  summary {
    font-size:15px
  }
  .faq {
    gap:12px
  }
  .mobile-cta {
    position:fixed;
    z-index:10;
    bottom:0;
    left:0;
    right:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:13px 20px max(13px,env(safe-area-inset-bottom));
    background:#211c12f5;
    border-top:1px solid #6d5a30;
    backdrop-filter:blur(12px)
  }
  .mobile-cta>span {
    font-size:10px;
    color:var(--muted)
  }
  .mobile-cta strong {
    display:block;
    font-size:12px;
    color:var(--text)
  }
  footer {
    flex-wrap:wrap;
    padding-bottom:112px
  }
  footer p {
    display:none
  }
  footer>span {
    font-size:11px
  }
  html {
    scroll-padding-top:20px
  }
  
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  * {
    transition:none!important
  }
  
}
 /* Compact acquisition layout */ .android-label {
  font-size:12px;
  letter-spacing:1.4px;
  color:var(--muted)
}
header {
  height:86px
}
.hero {
  padding-top:30px;
  padding-bottom:40px;
  gap:70px
}
h1 {
  font-size:clamp(64px,7vw,96px);
  line-height:.98;
  font-weight:700
}
.hero .intro {
  font-size:20px;
  margin:22px 0
}
.hero-button {
  min-width:290px
}
.access-panel {
  transform:none;
  max-width:460px
}
.direct-access h2 {
  font-size:54px;
  font-weight:700;
  line-height:1.02
}
.direct-access p {
  font-size:17px
}
.old-access {
  font-size:14px
}
.benefits {
  margin-top:0;
  gap:20px
}
.benefits article {
  border:1px solid var(--line);
  background:var(--panel);
  border-radius:10px;
  padding:22px
}
.feature-symbol {
  display:inline-block;
  font-size:30px;
  margin-bottom:10px
}
.benefits h3 {
  margin-bottom:5px
}
.benefits p {
  margin:0;
  font-size:16px
}
.registration {
  padding-top:65px;
  padding-bottom:35px;
  gap:70px
}
.registration h2 {
  font-size:52px
}
.short-steps {
  list-style:none;
  padding:0;
  margin:30px 0 0;
  display:flex;
  flex-direction:column;
  gap:16px
}
.short-steps li {
  display:flex;
  align-items:center;
  gap:14px;
  font-size:19px;
  font-weight:600
}
.short-steps span {
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  font-size:15px;
  color:var(--green);
  border:1px solid #5c7049;
  border-radius:50%
}
.compact-faq {
  padding:10px 0 40px
}
.compact-faq details {
  border-bottom:1px solid var(--line)
}
.compact-faq p {
  font-size:14px;
  color:var(--muted);
  max-width:700px
}
.password-wrap input {
  padding-right:108px
}
.form-description {
  font-size:15px
}
.form-footnote {
  font-size:12px
}
@media(max-width:700px) {
  header {
    height:72px
  }
  .android-label {
    font-size:9px;
    letter-spacing:.8px
  }
  .brand {
    font-size:24px
  }
  .hero {
    padding-top:20px;
    padding-bottom:26px;
    gap:26px
  }
  .hero h1 {
    font-size:clamp(60px,15vw,88px);
    letter-spacing:-3px;
    line-height:.98
  }
  .hero .intro {
    font-size:17px;
    margin:18px 0
  }
  .hero-button {
    width:100%;
    min-width:0;
    justify-content:space-between;
    font-size:17px
  }
  .hero .micro {
    font-size:12px;
    margin-top:14px
  }
  .hero .access-panel {
    display:none
  }
  .benefits {
    grid-template-columns:repeat(3,1fr);
    gap:8px
  }
  .benefits article {
    padding:14px 10px;
    border-radius:8px;
    text-align:center
  }
  .benefits .feature-symbol {
    font-size:24px;
    margin-bottom:9px;
    line-height:1
  }
  .benefits h3 {
    font-size:15px;
    line-height:1.3;
    letter-spacing:-.3px;
    margin:0
  }
  .benefits p {
    display:none
  }
  .registration {
    padding-top:34px;
    padding-bottom:20px;
    gap:19px
  }
  .registration .eyebrow {
    margin-bottom:12px
  }
  .registration h2 {
    font-size:32px;
    line-height:1.1;
    letter-spacing:-1px;
    margin-bottom:0
  }
  .registration h2 br {
    display:none
  }
  .registration h2 em:before {
    content:' '
  }
  .short-steps {
    flex-direction:row;
    flex-wrap:wrap;
    gap:12px;
    margin-top:18px
  }
  .short-steps li {
    font-size:12px;
    gap:6px
  }
  .short-steps span {
    width:23px;
    height:23px;
    font-size:11px
  }
  .form-card {
    padding:22px 18px
  }
  .form-heading h3 {
    font-size:25px
  }
  .form-description {
    margin-bottom:17px;
    font-size:14px
  }
  label {
    margin-top:14px
  }
  .compact-faq {
    padding-bottom:25px
  }
  .mobile-cta {
    padding-left:14px;
    padding-right:14px
  }
  .mobile-cta .small {
    font-size:11px;
    min-height:43px
  }
  .mobile-cta>span {
    font-size:10px
  }
  .mobile-cta strong {
    font-size:11px
  }
  
}
@media(max-width:360px) {
  .android-label {
    display:none
  }
  .mobile-cta>span {
    display:none
  }
  .mobile-cta .small {
    width:100%
  }
  
}
 /* APK download and visual installation guide */ .hero {
  grid-template-columns:1.35fr 1fr;
  gap:60px;
  padding:40px 0 45px
}
.hero h1 {
  font-size:clamp(48px,5.6vw,76px);
  letter-spacing:-3.5px
}
.guide-jump {
  display:inline-block;
  margin-top:20px
}
.download-card {
  padding:35px;
  background:var(--panel);
  border:1px solid #5e4c28;
  border-radius:14px
}
.download-card h2 {
  font-size:43px;
  letter-spacing:-1.8px
}
.download-card>p {
  color:var(--muted);
  max-width:330px
}
.apk-guide {
  padding:40px 0 45px;
  border-top:1px solid var(--line)
}
.guide-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  margin-bottom:25px
}
.guide-heading h2 {
  font-size:40px;
  margin-bottom:0
}
.guide-heading>p {
  font-size:13px;
  color:var(--muted);
  margin-bottom:0
}
.guide-heading .eyebrow {
  margin-bottom:14px
}
.guide-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px
}
.guide-step {
  background:var(--panel);
  border:1px solid #5e4c28;
  border-radius:12px;
  padding:20px
}
.step-title {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:20px
}
.step-title>span {
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  background:var(--green);
  color:var(--bg);
  font-weight:700;
  border-radius:50%;
  flex-shrink:0
}
.step-title h3 {
  font-size:19px;
  letter-spacing:-.6px;
  margin:0;
  font-weight:500
}
.step-title b {
  color:var(--green)
}
.screen-demo {
  min-height:208px;
  background:#f5f1e7;
  color:#29251c;
  border-radius:9px;
  padding:17px 13px;
  display:flex;
  flex-direction:column;
  justify-content:center
}
.screen-label {
  font-size:9px;
  letter-spacing:1px;
  color:#6b614b;
  margin-bottom:18px;
  text-align:center
}
.android-dialog {
  background:#fff;
  border-radius:13px;
  padding:17px 13px;
  box-shadow:0 4px 20px #1111
}
.android-dialog>strong {
  font-size:15px
}
.android-dialog p {
  font-size:12px;
  line-height:1.5;
  margin:10px 0 18px
}
.dialog-actions {
  display:flex;
  gap:18px;
  justify-content:flex-end;
  align-items:center;
  font-size:12px
}
.target {
  border:2px solid #a77900;
  color:#745500;
  padding:4px 8px;
  border-radius:5px;
  font-weight:700
}
.target b {
  margin-left:4px
}
.settings-title {
  font-size:12px;
  font-weight:700
}
.source-name {
  font-size:11px;
  margin:15px 0;
  color:#72654a
}
.setting-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border:2px solid #a77900;
  border-radius:6px;
  padding:10px;
  gap:10px
}
.setting-row strong {
  font-size:12px;
  line-height:1.4
}
.demo-switch {
  width:43px;
  height:25px;
  border-radius:30px;
  background:#a77b00;
  padding:3px;
  display:flex;
  justify-content:flex-end;
  flex-shrink:0
}
.demo-switch>span {
  height:19px;
  width:19px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:white;
  font-size:11px;
  color:#765800
}
.english-label {
  font-size:10px;
  margin:7px 0 0;
  color:#72654a
}
.guide-step>p {
  font-size:14px;
  line-height:1.6;
  color:#cbc1ab;
  margin:16px 0 0
}
.guide-note {
  display:flex;
  align-items:center;
  gap:10px;
  margin:20px 0;
  color:var(--muted)
}
.guide-note>span {
  border:1px solid #978152;
  border-radius:50%;
  width:19px;
  height:19px;
  display:grid;
  place-items:center;
  font-size:12px;
  flex-shrink:0
}
.guide-note p {
  font-size:12px;
  margin:0
}
.guide-cta {
  display:flex;
  gap:22px;
  align-items:center
}
.guide-cta>span {
  color:var(--muted);
  font-size:12px
}
.benefits {
  padding-bottom:0
}
.registration {
  padding-top:60px
}
.compact-faq details {
  padding-bottom:8px
}
.compact-faq .text-link {
  display:inline-block;
  margin:0 0 18px
}
dialog {
  background:var(--panel);
  color:var(--text);
  border:1px solid #ad8b37;
  border-radius:15px;
  max-width:460px;
  width:calc(100% - 40px);
  padding:35px
}
dialog::backdrop {
  background:#000a;
  backdrop-filter:blur(5px)
}
dialog h2 {
  font-size:32px;
  letter-spacing:-1px
}
dialog>p:not(.eyebrow) {
  color:var(--muted);
  font-size:15px
}
.close-dialog {
  position:absolute;
  top:7px;
  right:10px;
  background:none;
  border:0;
  color:var(--text);
  font-size:28px;
  min-width:36px;
  min-height:36px
}
@media(max-width:1000px) {
  .hero {
    gap:30px
  }
  .guide-grid {
    gap:12px
  }
  .guide-step {
    padding:14px
  }
  .step-title {
    gap:8px
  }
  .step-title h3 {
    font-size:17px
  }
  .download-card {
    padding:25px
  }
  .download-card h2 {
    font-size:36px
  }
  
}
@media(max-width:700px) {
  .hero {
    grid-template-columns:1fr;
    padding-top:22px;
    padding-bottom:30px;
    gap:0
  }
  .hero h1 {
    font-size:clamp(43px,10.9vw,70px);
    letter-spacing:-2.4px
  }
  .hero h1 em {
    white-space:nowrap
  }
  .hero .intro {
    font-size:17px;
    margin:18px 0
  }
  .download-card {
    display:none
  }
  .guide-jump {
    font-size:13px;
    margin-top:17px
  }
  .apk-guide {
    padding-top:28px;
    padding-bottom:28px
  }
  .guide-heading {
    display:block;
    margin-bottom:20px
  }
  .guide-heading h2 {
    font-size:31px
  }
  .guide-heading>p {
    font-size:11px;
    margin-top:13px
  }
  .guide-heading>p br {
    display:none
  }
  .guide-heading .eyebrow {
    font-size:9px;
    letter-spacing:1px
  }
  .guide-grid {
    grid-template-columns:1fr;
    gap:14px
  }
  .guide-step {
    display:grid;
    grid-template-columns:1fr 1.1fr;
    column-gap:14px;
    padding:17px
  }
  .step-title {
    grid-column:1;
    display:block;
    margin-bottom:10px
  }
  .step-title>span {
    margin-bottom:12px
  }
  .step-title h3 {
    font-size:21px;
    line-height:1.15
  }
  .step-title h3 b {
    display:block;
    margin-top:4px
  }
  .screen-demo {
    grid-column:2;
    grid-row:1 / 3;
    min-height:175px;
    padding:12px 8px
  }
  .screen-label {
    font-size:8px;
    letter-spacing:.3px;
    margin-bottom:12px
  }
  .android-dialog {
    padding:12px 9px
  }
  .android-dialog>strong {
    font-size:12px
  }
  .android-dialog p {
    font-size:10px;
    margin-bottom:13px
  }
  .dialog-actions {
    gap:8px;
    font-size:10px
  }
  .target {
    padding:3px 5px
  }
  .target b {
    display:none
  }
  .settings-title {
    font-size:10px
  }
  .source-name {
    font-size:9px;
    margin:12px 0
  }
  .setting-row {
    padding:7px;
    gap:4px
  }
  .setting-row strong {
    font-size:10px
  }
  .demo-switch {
    width:33px;
    height:21px;
    padding:3px
  }
  .demo-switch>span {
    width:15px;
    height:15px;
    font-size:9px
  }
  .english-label {
    font-size:9px
  }
  .guide-step>p {
    grid-column:1;
    font-size:12px;
    margin:0
  }
  .guide-note {
    align-items:flex-start;
    margin:17px 0
  }
  .guide-note p {
    font-size:11px
  }
  .guide-cta {
    display:block
  }
  .guide-cta .button {
    width:100%;
    font-size:14px;
    padding:16px 12px;
    gap:15px
  }
  .guide-cta>span {
    display:block;
    font-size:11px;
    margin-top:11px;
    text-align:center
  }
  .registration {
    padding-top:35px
  }
  .mobile-cta .small {
    font-size:12px
  }
  dialog {
    padding:29px 23px
  }
  dialog h2 {
    font-size:27px
  }
  
}
 .required {
  color:#f2a18d
}
.optional {
  float:right;
  font-size:12px;
  font-weight:400;
  color:var(--muted)
}
.registration {
  align-items:start
}
.registration-copy {
  padding-top:25px
}
.validation-row {
  display:flex;
  gap:8px;
  align-items:stretch
}
.validation-row output {
  display:grid;
  place-items:center;
  background:var(--green);
  color:var(--bg);
  font:700 24px/1 'xVf',sans-serif;
  letter-spacing:2px;
  padding:0 12px;
  border-radius:6px;
  min-width:104px
}
.validation-row input {
  flex:1;
  min-width:0
}
.validation-row button {
  border:1px solid #7c662f;
  background:var(--panel);
  color:var(--green);
  border-radius:6px;
  min-width:42px;
  font-size:24px
}
.form-footnote {
  margin-top:16px
}
@media(max-width:400px) {
  .validation-row {
    gap:6px
  }
  .validation-row output {
    min-width:85px;
    padding:0 8px;
    font-size:21px
  }
  .validation-row input {
    padding-left:9px;
    padding-right:9px
  }
  .validation-row button {
    min-width:36px
  }
  
}
 /* Wide, compact desktop registration; stacked mobile fields. */ .registration {
  display:block;
  max-width:1100px
}
.registration-copy {
  padding-top:0;
  margin-bottom:24px
}
.registration-copy .eyebrow {
  margin-bottom:12px
}
.registration-copy h2 {
  font-size:38px;
  margin-bottom:10px
}
.registration-copy h2 br {
  display:none
}
.registration-copy h2 em:before {
  content:' '
}
.registration-copy>p:not(.eyebrow) {
  max-width:none;
  margin:0
}
.registration .form-card {
  padding:28px 32px
}
.registration .form-heading h3 {
  font-size:25px
}
.registration .form-description {
  margin-bottom:14px
}
#register-form {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px 24px
}
#register-form>.field-help,#register-form>.submit,#register-form>.form-footnote,#register-form>.form-banner {
  grid-column:1/-1;
  margin:0
}
.form-field {
  min-width:0
}
.form-field label {
  margin:0 0 7px
}
.form-field>.field-help {
  margin:8px 0 0
}
.form-field:last-of-type {
  grid-column:1/-1;
  max-width:480px
}
.registration .form-footnote {
  padding-top:0
}
.registration .submit {
  width:240px;
  justify-self:end
}
.registration .form-footnote {
  text-align:right
}
.registration input,.registration select {
  padding-top:11px;
  padding-bottom:11px
}
@media(max-width:700px) {
  .registration-copy h2 {
    font-size:32px
  }
  .registration-copy {
    margin-bottom:20px
  }
  .registration .form-card {
    padding:22px 18px
  }
  #register-form {
    grid-template-columns:minmax(0,1fr);
    gap:17px
  }
  .form-field:last-of-type {
    max-width:none
  }
  .registration .submit {
    width:100%
  }
  .registration .form-footnote {
    text-align:center
  }
  .registration input,.registration select {
    padding-top:13px;
    padding-bottom:13px
  }
  
}
  /* Download reward hero */ .promo-hero {
  padding-top:42px;
  padding-bottom:48px;
  grid-template-columns:1.4fr 1fr
}
.promo-hero h1 {
  font-size:clamp(44px,5.4vw,72px);
  line-height:1.03;
  letter-spacing:-3px
}
.promo-hero .intro {
  font-size:20px
}
.promo-card {
  background:#ffd43b;
  color:#19160f;
  border:1px solid #ffe783;
  border-radius:16px;
  padding:30px;
  text-align:center;
  box-shadow:0 20px 55px #0003
}
.promo-kicker {
  font-size:10px;
  letter-spacing:1.7px;
  font-weight:700;
  display:block
}
.promo-amount {
  display:block;
  font:700 clamp(110px,12vw,165px)/1 'xVf',sans-serif;
  letter-spacing:-10px;
  margin:25px 0 0
}
.promo-name {
  font-family:'xVf',sans-serif;
  font-size:37px;
  font-weight:700;
  letter-spacing:4px;
  display:block
}
.promo-card>p {
  color:#594717;
  font-size:18px;
  margin:20px auto 25px;
  line-height:1.45
}
.promo-bottom {
  display:flex;
  justify-content:space-between;
  gap:12px;
  border-top:1px solid #b99a37;
  padding-top:19px;
  font-weight:700;
  font-size:13px
}
.promo-bottom span {
  font-size:10px;
  font-weight:500;
  letter-spacing:1px
}
@media(max-width:700px) {
  .promo-hero {
    grid-template-columns:1fr;
    padding-top:25px;
    padding-bottom:30px
  }
  .promo-hero h1 {
    font-size:clamp(37px,9.7vw,65px);
    letter-spacing:-2px;
    line-height:1.07
  }
  .promo-hero h1 em {
    white-space:normal
  }
  .promo-hero .intro {
    font-size:17px
  }
  .promo-card {
    display:none
  }
  .promo-hero .eyebrow {
    font-size:10px;
    letter-spacing:1.2px
  }
  .promo-hero .micro {
    font-size:11px
  }
  
}
  /* Benefit-first page sequence */ .reasons-section {
  padding-top:48px;
  padding-bottom:45px;
  border-top:1px solid var(--line)
}
.reasons-section>.eyebrow {
  margin-bottom:14px
}
.reasons-section>h2 {
  font-size:42px;
  margin-bottom:28px
}
.reasons-grid {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px
}
.reasons-grid article {
  padding:23px
}
.reasons-grid h3 {
  font-size:23px;
  line-height:1.2;
  letter-spacing:-.7px;
  margin-bottom:12px
}
.reasons-grid p {
  font-size:15px;
  line-height:1.65
}
.reasons-footer {
  margin-top:26px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px
}
.reasons-footer p {
  font-size:14px;
  color:var(--muted);
  margin:0
}
.reasons-footer strong {
  font-weight:500;
  color:var(--text)
}
@media(max-width:700px) {
  .reasons-section {
    padding:28px 0
  }
  .reasons-section>h2 {
    font-size:32px;
    margin-bottom:22px
  }
  .reasons-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px
  }
  .reasons-grid article {
    text-align:left;
    padding:16px 13px
  }
  .reasons-grid h3 {
    font-size:18px;
    line-height:1.2;
    margin-bottom:9px
  }
  .reasons-grid p {
    display:block;
    font-size:12px;
    line-height:1.6
  }
  .reasons-grid .feature-symbol {
    font-size:27px;
    margin-bottom:13px
  }
  .reasons-footer {
    display:block;
    margin-top:22px
  }
  .reasons-footer p {
    font-size:13px;
    margin-bottom:15px
  }
  .reasons-footer .button {
    width:100%;
    justify-content:space-between
  }
  
}

/* Installation FAQ belongs with the guide, before registration. */
.compact-faq{padding:30px 28px;margin-top:0;margin-bottom:42px;background:var(--panel);border:1px solid var(--line);border-radius:14px}.faq-intro .eyebrow{margin-bottom:12px}.faq-intro h2{font-size:30px;letter-spacing:-1px;margin-bottom:10px}.faq-intro>p:last-child{margin-bottom:20px}.faq-items details:last-child{border-bottom:0}.faq-items summary{font-weight:600;padding:18px 32px 18px 0}.faq-items summary:focus-visible{outline:2px solid var(--green);outline-offset:-2px;border-radius:5px}.faq-items details[open] summary{color:var(--green)}.faq-items p{max-width:850px;margin-bottom:15px}.faq-items .text-link{margin-bottom:16px}.registration{border-top:1px solid var(--line)}@media(max-width:700px){.compact-faq{padding:23px 18px;margin-bottom:28px}.faq-intro h2{font-size:26px}.faq-items summary{font-size:15px}.faq-items p{font-size:13px}}

/* Readable installation steps and comfortable touch targets. */
.password-wrap button { min-height:44px; min-width:64px; font-size:14px; }
.close-dialog, .validation-row button { min-width:44px; min-height:44px; }
.screen-label { font-size:12px; letter-spacing:.3px; }
.android-dialog p, .dialog-actions, .settings-title, .source-name,
.setting-row strong, .english-label { font-size:14px; }
.guide-step > p { font-size:16px; }
.screen-demo { min-height:240px; }
.guide-note p, .guide-cta > span { font-size:14px; }
@media (max-width:700px) {
  .guide-step { grid-template-columns:minmax(0,1fr); padding:20px; }
  .step-title { grid-column:1; display:flex; gap:12px; margin-bottom:16px; align-items:center; }
  .step-title > span { margin:0; }
  .step-title h3 { font-size:22px; }
  .step-title h3 b { display:inline; margin:0; }
  .screen-demo { grid-column:1; grid-row:auto; padding:18px; min-height:220px; }
  .screen-label { font-size:12px; letter-spacing:.3px; margin-bottom:16px; }
  .android-dialog { padding:18px; }
  .android-dialog > strong { font-size:16px; }
  .android-dialog p, .dialog-actions, .settings-title, .source-name,
  .setting-row strong, .english-label { font-size:14px; }
  .dialog-actions { gap:20px; }
  .target { padding:7px 14px; }
  .setting-row { padding:14px; gap:14px; }
  .demo-switch { width:43px; height:25px; }
  .demo-switch > span { width:19px; height:19px; font-size:12px; }
  .guide-step > p { grid-column:1; font-size:16px; margin:15px 0 0; }
  .guide-note p, .guide-cta > span, .guide-heading > p { font-size:14px; }
  .reasons-grid p, .reasons-footer p { font-size:14px; }
  .faq-items p { font-size:15px; }
  .mobile-cta .small { font-size:14px; min-height:48px; }
  .mobile-cta > span { font-size:12px; }
  .mobile-cta strong { font-size:12px; }
  .hero .micro, .form-footnote, .field-help { font-size:12px; }
  .preview { font-size:12px; }
}
@media (max-width:380px) {
  .reasons-grid { grid-template-columns:minmax(0,1fr); }
  .mobile-cta > span { display:none; }
  .mobile-cta .small { width:100%; }
}

/* Player-first headline, with the download offer visible on every device. */
.promo-hero{grid-template-columns:minmax(0,1.6fr) minmax(270px,1fr);gap:42px;align-items:center}
.promo-hero h1{font-size:clamp(38px,4.1vw,59px);line-height:1.08;letter-spacing:-2.3px}
.promo-hero .intro{max-width:540px;font-size:18px;line-height:1.65;margin:22px 0}
.hero-offer{border-left:3px solid var(--green);padding:3px 0 3px 16px;margin:0 0 22px}
.hero-offer>span{display:block;font-size:12px;letter-spacing:1.4px;color:var(--muted);margin-bottom:5px}
.hero-offer>strong{display:block;font-family:'xVf',sans-serif;font-size:25px;line-height:1.25;color:var(--green)}
.promo-hero .hero-button{min-height:56px}
@media(max-width:900px) and (min-width:701px){.promo-hero{gap:26px;grid-template-columns:minmax(0,1.45fr) minmax(240px,1fr)}.promo-hero h1{font-size:38px;letter-spacing:-1.5px}.promo-card{padding:23px}.promo-name{font-size:29px;letter-spacing:2px}.promo-hero .intro{font-size:16px}.hero-offer>strong{font-size:23px}}
@media(max-width:700px){.promo-hero{grid-template-columns:minmax(0,1fr);gap:0;padding-top:25px}.promo-hero h1{font-size:clamp(30px,7.6vw,48px);letter-spacing:-1.2px;line-height:1.12}.promo-hero h1 em{white-space:normal}.promo-hero .intro{font-size:16px;margin:19px 0}.hero-offer{margin-bottom:20px;padding-left:13px}.hero-offer>span{font-size:11px}.hero-offer>strong{font-size:23px}.promo-hero .hero-button{font-size:15px;gap:12px}.promo-hero .guide-jump{font-size:13px}.promo-card{display:none}}

/* Owner-provided positioning and user-count statement. */
.player-proof{font-size:16px;color:var(--text);display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin:22px 0 0}.player-proof>span{color:var(--green);margin-right:5px}.player-proof strong{color:var(--green);font-weight:700}.promo-hero .player-proof+.intro{margin-top:16px}.promo-hero h1{font-size:clamp(36px,3.9vw,56px)}@media(max-width:900px) and (min-width:701px){.promo-hero h1{font-size:36px;letter-spacing:-1.6px}}@media(max-width:700px){.promo-hero h1{font-size:clamp(29px,7.5vw,46px);letter-spacing:-1.2px}.player-proof{font-size:14px;margin-top:17px}.promo-hero .eyebrow{font-size:11px;letter-spacing:1px}}

/* hokiwin77 LP: benefit-led hierarchy. Overrides the original draft components. */
.hokiwin77-refined { --accent: #ffd43b; }
.skip-link { position:fixed; top:8px; left:16px; z-index:100; padding:12px 18px; background:var(--accent); color:var(--bg); transform:translateY(-160%); }
.skip-link:focus { transform:translateY(0); }
.hokiwin77-refined .wrap { width:min(1160px,calc(100% - 64px)); }
.hokiwin77-refined header { height:88px; }
.hokiwin77-refined .promo-hero { grid-template-columns:minmax(0,1.18fr) minmax(0,1fr); gap:64px; padding:40px 0 64px; }
.hokiwin77-refined .eyebrow { font-size:11px; line-height:1.6; letter-spacing:1.5px; margin-bottom:16px; }
.hokiwin77-refined .promo-hero h1 { font-size:clamp(44px,4.7vw,64px); line-height:1.07; letter-spacing:-2.8px; margin:0; }
.hokiwin77-refined .promo-hero .intro { font-size:17px; line-height:1.65; max-width:460px; margin:24px 0; }
.hokiwin77-refined .hero-offer { padding:14px 18px; margin-bottom:24px; border:1px solid #665728; border-left:3px solid var(--accent); border-radius:0 10px 10px 0; background:#252115; }
.hokiwin77-refined .hero-offer>span { font-size:10px; letter-spacing:1.6px; margin-bottom:3px; }
.hokiwin77-refined .hero-offer>strong { font-size:26px; color:var(--text); line-height:1.4; }
.hero-offer b { color:var(--accent); }
.hero-offer small { color:var(--muted); font-size:12px; }
.hero-action-row { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.hokiwin77-refined .button { min-height:52px; padding:15px 22px; border-radius:8px; }
.hokiwin77-refined .hero-button { min-width:230px; justify-content:space-between; }
.secondary-link { display:inline-flex; align-items:center; gap:12px; min-height:48px; font-size:14px; text-decoration:underline; text-underline-offset:5px; }
.hokiwin77-refined .hero .micro { margin:14px 0 0; font-size:12px; line-height:1.6; color:var(--muted); }
.access-visual { border:1px solid #5c4d26; border-radius:24px; padding:26px; background:radial-gradient(ellipse at 60% 35%,#4d411c 0%,#242016 50%,#1e1b14 80%); overflow:hidden; }
.visual-top,.visual-bottom { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.visual-top { color:#d8ceb8; font-size:10px; font-weight:600; letter-spacing:1.5px; }
.visual-top>span:last-child { font-size:24px; color:var(--accent); }
.app-orbit { height:252px; position:relative; display:grid; place-items:center; }
.orbit-ring { position:absolute; width:218px; height:218px; border:1px solid #a188364d; border-radius:50%; box-shadow:0 0 0 28px #b6952c08,0 0 0 56px #b6952c05; }
.app-tile { z-index:1; width:108px; height:112px; border-radius:26px; background:linear-gradient(135deg,#ffe997,#ffd43b); color:#1b170d; display:flex; align-items:center; justify-content:center; flex-direction:column; font-size:38px; line-height:1; box-shadow:0 15px 35px #0005; transform:rotate(-8deg); }
.app-tile span { font:700 19px/1.5 'xVf',sans-serif; letter-spacing:1px; }
.orbit-label { position:absolute; z-index:2; padding:8px 13px; font-size:12px; background:#302a1c; border:1px solid #655533; border-radius:24px; color:#f7f3e9; }
.orbit-label-one { top:38px; left:0; }
.orbit-label-two { right:0; bottom:40px; }
.visual-caption { position:relative; }
.visual-caption strong { display:block; font:600 32px/1.15 'xVf',sans-serif; letter-spacing:-1px; }
.visual-caption p { margin:14px 0 24px; color:var(--muted); font-size:14px; }
.visual-bottom { border-top:1px solid var(--line); padding-top:18px; font-size:13px; font-weight:700; }
.visual-bottom>span:last-child { font-size:9px; font-weight:400; letter-spacing:1px; color:var(--muted); }
.hokiwin77-refined .reasons-section { padding:56px 0; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; margin-bottom:28px; }
.hokiwin77-refined .section-heading h2,.hokiwin77-refined .trust-copy h2,.hokiwin77-refined .guide-heading h2 { font-size:clamp(30px,3vw,40px); line-height:1.15; letter-spacing:-1.4px; margin:0; }
.section-heading>p { font-size:15px; line-height:1.6; color:var(--muted); max-width:210px; margin:0 0 3px; }
.hokiwin77-refined .reasons-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.hokiwin77-refined .reasons-grid article { text-align:left; padding:24px; border:1px solid var(--line); border-radius:12px; background:#201d16; }
.hokiwin77-refined .reasons-grid .pain-label { font-size:14px; color:#c5bda9; margin:0; line-height:1.5; }
.solution-arrow { color:#a99352; display:block; margin:6px 0; font-size:18px; }
.hokiwin77-refined .reasons-grid h3 { font-size:21px; line-height:1.25; letter-spacing:-.6px; margin:0 0 10px; color:var(--text); }
.hokiwin77-refined .reasons-grid article>p:last-child { font-size:14px; line-height:1.65; margin:0; color:var(--muted); display:block; }
.hokiwin77-refined .trust-section { display:flex; align-items:center; justify-content:space-between; gap:40px; padding:32px; border:1px solid #68582c; border-radius:16px; background:linear-gradient(110deg,#302919,#211e16); margin-bottom:56px; }
.trust-facts { display:grid; grid-template-columns:1fr 1fr; gap:36px; }
.trust-facts>div { border-left:1px solid #675731; padding-left:28px; }
.trust-facts strong { display:block; font:600 36px/1.3 'xVf',sans-serif; color:var(--accent); letter-spacing:-1px; }
.trust-facts span { display:block; font-size:14px; color:#d4cbb9; margin-top:6px; }
.hokiwin77-refined .apk-guide { padding:48px 0 36px; }
.hokiwin77-refined .guide-heading { gap:28px; }
.hokiwin77-refined .compact-faq { margin-bottom:48px; }
.hokiwin77-refined footer { padding-bottom:32px; }
@media(min-width:701px) and (max-width:1020px) {
  .hokiwin77-refined .promo-hero { gap:30px; }
  .hokiwin77-refined .promo-hero h1 { font-size:46px; letter-spacing:-2px; }
  .hero-action-row { gap:4px 18px; }
  .hokiwin77-refined .hero-button { min-width:210px; }
  .access-visual { padding:22px; }
  .hokiwin77-refined .reasons-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .trust-facts { gap:20px; }
  .trust-facts>div { padding-left:20px; }
  .trust-facts strong { font-size:30px; }
  .hokiwin77-refined .trust-section { padding:26px; gap:24px; }
}
@media(max-width:700px) {
  .hokiwin77-refined .wrap { width:calc(100% - 40px); }
  .hokiwin77-refined header { height:72px; }
  .hokiwin77-refined .brand { font-size:24px; }
  .hokiwin77-refined .android-label { font-size:10px; }
  .hokiwin77-refined .promo-hero { grid-template-columns:minmax(0,1fr); padding:24px 0 36px; gap:0; }
  .hokiwin77-refined .promo-hero h1 { font-size:clamp(36px,9.4vw,56px); line-height:1.09; letter-spacing:-1.7px; }
  .desktop-break { display:none; }
  .hokiwin77-refined .promo-hero .intro { font-size:16px; margin:18px 0; }
  .hokiwin77-refined .hero-offer { padding:12px 15px; margin-bottom:18px; }
  .hokiwin77-refined .hero-offer>strong { font-size:25px; }
  .hero-action-row { gap:4px; }
  .hokiwin77-refined .hero-button { width:100%; min-height:54px; }
  .secondary-link { justify-content:center; width:100%; }
  .hokiwin77-refined .hero .micro { margin:3px 0 0; text-align:center; }
  .access-visual { display:none; }
  .hokiwin77-refined .eyebrow { font-size:10px; letter-spacing:1.2px; margin-bottom:12px; }
  .section-heading { display:block; margin-bottom:22px; }
  .section-heading>p { max-width:none; margin:12px 0 0; font-size:14px; }
  .hokiwin77-refined .reasons-section { padding:32px 0; }
  .hokiwin77-refined .reasons-grid { grid-template-columns:minmax(0,1fr); gap:12px; }
  .hokiwin77-refined .reasons-grid article { padding:18px 20px; }
  .hokiwin77-refined .reasons-grid .pain-label { font-size:13px; }
  .solution-arrow { display:none; }
  .hokiwin77-refined .reasons-grid h3 { font-size:21px; margin:8px 0 6px; }
  .hokiwin77-refined .trust-section { display:block; padding:24px; margin-bottom:32px; }
  .trust-facts { gap:20px; margin-top:24px; }
  .trust-facts>div { padding-left:0; border-left:0; border-top:1px solid #675731; padding-top:16px; }
  .trust-facts strong { font-size:30px; }
  .trust-facts span { font-size:13px; }
  .hokiwin77-refined .apk-guide { padding:32px 0; }
  .hokiwin77-refined .compact-faq { margin-bottom:32px; }
  .hokiwin77-refined .mobile-cta { padding-bottom:max(12px,env(safe-area-inset-bottom)); }
  .hokiwin77-refined footer { padding-bottom:112px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .hokiwin77-refined *, .hokiwin77-refined *::before,.hokiwin77-refined *::after { transition:none; animation:none; }
}
.mobile-cta[hidden] { display:none !important; }

/* Compact, playful composition: one offer, three benefits, optional instructions. */
.hokiwin77-refined .promo-hero { padding-top:24px; padding-bottom:40px; gap:48px; }
.hokiwin77-refined .promo-hero h1 { font-size:clamp(44px,5vw,68px); }
.hokiwin77-refined .hero-offer { background:var(--accent); color:#21190b; border:0; border-radius:14px; padding:18px 22px; position:relative; box-shadow:5px 5px 0 #66511a; }
.hokiwin77-refined .hero-offer>span,.hokiwin77-refined .hero-offer small { color:#554216; }
.hokiwin77-refined .hero-offer>strong { color:#21190b; font-size:28px; line-height:1.2; }
.hokiwin77-refined .hero-offer b { color:#21190b; font-size:40px; }
.hokiwin77-refined .hero-offer small { display:block; margin-top:8px; }
.fun-visual { position:relative; min-height:400px; display:flex; flex-direction:column; justify-content:center; align-items:center; background:radial-gradient(ellipse,#69511d66,transparent 68%); }
.fun-sticker { transform:rotate(-8deg); color:#221a0b; background:#f5eee0; border-radius:6px; padding:9px 16px; font-size:12px; font-weight:700; letter-spacing:1px; position:absolute; top:12px; left:8px; }
.fun-icon { width:154px; height:160px; background:linear-gradient(130deg,#ffeb96,#ffd43b); color:#21190b; border-radius:36px; transform:rotate(10deg); box-shadow:9px 12px 0 #8c691c,18px 25px 40px #0005; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:52px; line-height:1; margin:26px 0 42px; }
.fun-icon small { font:700 28px/1.5 'xVf',sans-serif; }
.fun-spark { color:var(--accent); font-size:60px; position:absolute; right:14px; top:98px; }
.fun-visual>strong { font:700 36px/1.1 'xVf',sans-serif; text-align:center; letter-spacing:-1px; }
.fun-caption { color:var(--muted); font-size:10px; letter-spacing:2px; margin-top:18px; }
.hokiwin77-refined .reasons-section { padding:36px 0 24px; }
.hokiwin77-refined .section-heading h2 { font-size:36px; }
.quick-benefits { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.quick-benefits article { padding:0 20px 0 0; border-right:1px solid var(--line); }
.quick-benefits article:last-child { border-right:0; }
.quick-benefits article>span { display:block; font-size:30px; color:var(--accent); line-height:1; margin-bottom:14px; }
.quick-benefits h3 { font-size:21px; line-height:1.2; letter-spacing:-.5px; margin:0 0 8px; }
.quick-benefits p { color:var(--muted); font-size:14px; line-height:1.5; margin:0; }
.extra-perks { display:flex; flex-wrap:wrap; gap:12px 28px; border-top:1px solid var(--line); margin-top:24px; padding-top:18px; font-size:14px; }
.perks-note { font-size:12px; color:var(--muted); margin:10px 0 0; }
.hokiwin77-refined .trust-section { padding:18px 0; border:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); border-radius:0; background:none; margin-bottom:28px; gap:20px; flex-wrap:wrap; font-size:14px; }
.trust-section>strong { font-size:16px; }
.trust-section>span { color:var(--muted); }
.trust-section b { color:var(--accent); }
.hokiwin77-refined .apk-guide { border-top:0; padding:20px 0 28px; }
.hokiwin77-refined .guide-heading { margin-bottom:22px; }
.install-short { list-style:none; padding:0; margin:0 0 18px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.install-short li { display:flex; gap:12px; align-items:center; font-size:15px; line-height:1.4; }
.install-short li>b { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--accent); color:var(--bg); flex-shrink:0; }
.install-short strong { display:block; }
.install-details { border:1px solid var(--line); border-radius:10px; padding:0 18px; }
.install-details>summary { padding:16px 36px 16px 0; min-height:54px; font-size:15px; font-weight:600; }
.install-details>summary:focus-visible { outline-offset:0; }
.example-note { font-size:13px; color:var(--muted); margin:8px 0 16px; }
.hokiwin77-refined .compact-faq { background:none; border:0; border-top:1px solid var(--line); border-radius:0; padding:24px 0; margin-bottom:0; }
.hokiwin77-refined .faq-intro h2 { font-size:24px; margin-bottom:6px; }
.hokiwin77-refined .faq-items summary { padding-top:14px; padding-bottom:14px; }
.hokiwin77-refined .registration { padding-top:32px; padding-bottom:32px; }
.hokiwin77-refined .registration-copy { margin-bottom:20px; }
.hokiwin77-refined .registration-copy h2 { font-size:32px; line-height:1.15; margin-bottom:10px; }
.hokiwin77-refined .registration-copy>p:last-child { margin-bottom:0; }
@media(max-width:700px) {
 .hokiwin77-refined .promo-hero { padding:18px 0 30px; gap:0; }
 .hokiwin77-refined .promo-hero h1 { font-size:clamp(40px,11vw,58px); }
 .fun-visual { display:none; }
 .hokiwin77-refined .hero-offer { padding:15px 18px; }
 .hokiwin77-refined .hero-offer>strong { font-size:25px; }
 .hokiwin77-refined .hero-offer b { font-size:34px; }
 .hokiwin77-refined .section-heading h2 { font-size:30px; }
 .quick-benefits { grid-template-columns:1fr; gap:20px; }
 .quick-benefits article { display:flex; gap:16px; padding:0; border:0; }
 .quick-benefits article>span { width:30px; flex-shrink:0; margin:3px 0 0; }
 .quick-benefits h3 { font-size:20px; margin-bottom:4px; }
 .extra-perks { gap:10px; font-size:13px; }
 .extra-perks>span { display:block; width:100%; }
 .hokiwin77-refined .trust-section { display:flex; gap:8px 18px; margin-bottom:20px; }
 .trust-section>strong { width:100%; }
 .trust-section>span { font-size:12px; }
 .install-short { grid-template-columns:1fr; gap:14px; }
 .install-short strong { display:inline; }
 .hokiwin77-refined .guide-heading h2 { font-size:30px; }
 .hokiwin77-refined .install-details .guide-grid { gap:14px; }
 .hokiwin77-refined .install-details { padding:0 12px; }
 .hokiwin77-refined .install-details .guide-step { padding:14px; }
 .hokiwin77-refined .install-details .screen-demo { padding:12px; }
 .hokiwin77-refined .registration-copy h2 { font-size:28px; }
}

/* Benefits: centered heading and consistent reading columns. */
.hokiwin77-refined .reasons-section .section-heading { display:block; text-align:center; margin-bottom:32px; }
.hokiwin77-refined .reasons-section .eyebrow { justify-content:center; }
.hokiwin77-refined .reasons-section h2 br { display:none; }
.hokiwin77-refined .reasons-section h2 em::before { content:' '; white-space:pre; }
.hokiwin77-refined .quick-benefits { gap:0; }
.hokiwin77-refined .quick-benefits article { text-align:center; padding:0 24px; }
.hokiwin77-refined .quick-benefits article>span { margin:0 auto 16px; height:36px; line-height:36px; }
.hokiwin77-refined .quick-benefits h3 { font-size:20px; }
.hokiwin77-refined .quick-benefits p { max-width:260px; margin:0 auto; }
.hokiwin77-refined .extra-perks { justify-content:center; gap:16px 28px; margin-top:28px; padding-top:20px; }
.hokiwin77-refined .perks-note { text-align:center; }
.hokiwin77-refined .trust-section { justify-content:center; column-gap:28px; row-gap:8px; text-align:center; }
.hokiwin77-refined .trust-section>strong { flex-basis:100%; }
@media(max-width:700px) {
 .hokiwin77-refined .reasons-section h2 br { display:block; }
 .hokiwin77-refined .reasons-section h2 em::before { content:none; }
 .hokiwin77-refined .reasons-section .section-heading { margin-bottom:26px; }
 .hokiwin77-refined .quick-benefits { gap:22px; max-width:370px; margin:0 auto; }
 .hokiwin77-refined .quick-benefits article { text-align:left; padding:0; align-items:flex-start; }
 .hokiwin77-refined .quick-benefits article>span { margin:1px 0 0; }
 .hokiwin77-refined .quick-benefits p { max-width:none; margin:0; }
 .hokiwin77-refined .extra-perks { gap:10px 18px; }
 .hokiwin77-refined .extra-perks>span { width:auto; }
 .hokiwin77-refined .trust-section { column-gap:18px; }
}

/* Shared centered section hierarchy, with left-aligned reading controls. */
.hokiwin77-refined .promo-hero { grid-template-columns:minmax(0,1fr); justify-items:center; padding:36px 0 48px; }
.hokiwin77-refined .hero-copy { width:100%; max-width:720px; text-align:center; }
.hokiwin77-refined .hero-copy .eyebrow { justify-content:center; }
.hokiwin77-refined .promo-hero h1 br { display:none; }
.hokiwin77-refined .promo-hero h1 em::before { content:' '; white-space:pre; }
.hokiwin77-refined .promo-hero .intro { max-width:530px; margin:20px auto 24px; }
.hokiwin77-refined .hero-offer { max-width:500px; margin:0 auto 24px; }
.hokiwin77-refined .hero-action-row { justify-content:center; }
.hokiwin77-refined .fun-visual { display:none; }
.hokiwin77-refined .guide-heading { display:block; text-align:center; margin-bottom:30px; }
.hokiwin77-refined .guide-heading .eyebrow { justify-content:center; }
.hokiwin77-refined .guide-heading h2 br { display:none; }
.hokiwin77-refined .guide-heading h2 em::before { content:' '; white-space:pre; }
.hokiwin77-refined .guide-heading>p { margin:14px auto 0; max-width:520px; }
.hokiwin77-refined .install-short { max-width:900px; margin:0 auto 26px; }
.hokiwin77-refined .install-short li { flex-direction:column; text-align:center; gap:12px; padding:0 20px; }
.hokiwin77-refined .install-short li+li { border-left:1px solid var(--line); }
.hokiwin77-refined .install-details { max-width:1000px; margin:0 auto; }
.hokiwin77-refined .install-details>summary { text-align:center; }
.hokiwin77-refined .guide-cta { justify-content:center; flex-direction:column; text-align:center; gap:12px; }
.hokiwin77-refined .faq-intro { text-align:center; margin-bottom:20px; }
.hokiwin77-refined .faq-items { max-width:820px; margin:0 auto; text-align:left; }
.hokiwin77-refined .registration-copy { text-align:center; max-width:none; margin:0 auto 26px; }
.hokiwin77-refined .registration-copy .eyebrow { justify-content:center; }
.hokiwin77-refined .registration-copy>p:not(.eyebrow) { max-width:none; }
.hokiwin77-refined .registration .form-card { width:100%; max-width:960px; margin:0 auto; text-align:left; }
@media(max-width:700px) {
 .hokiwin77-refined .promo-hero { padding:22px 0 32px; }
 .hokiwin77-refined .promo-hero h1 br,.hokiwin77-refined .guide-heading h2 br { display:block; }
 .hokiwin77-refined .promo-hero h1 em::before,.hokiwin77-refined .guide-heading h2 em::before { content:none; }
 .hokiwin77-refined .promo-hero .intro { margin:18px auto; }
 .hokiwin77-refined .install-short { gap:16px; max-width:360px; }
 .hokiwin77-refined .install-short li { flex-direction:row; text-align:left; padding:0; }
 .hokiwin77-refined .install-short li+li { border-left:0; }
 .hokiwin77-refined .registration-copy h2 br { display:block; }
 .hokiwin77-refined .registration-copy h2 em::before { content:none; }
}
.hokiwin77-refined .guide-cta { margin-top:22px; }

/* Spacious editorial rhythm, inspired by the supplied x.ai reference. */
.hokiwin77-refined { --bg:#0d0e10; --panel:#191a1d; --line:#303136; --muted:#a9aaaf; --text:#f5f5f6; background:var(--bg); }
.hokiwin77-refined .wrap { width:min(1160px,calc(100% - 64px)); }
.hokiwin77-refined .preview { background:#22211b; color:#c7bea1; letter-spacing:.5px; }
.hokiwin77-refined header { height:88px; }
.hokiwin77-refined .eyebrow { color:var(--muted); font-weight:500; letter-spacing:1.7px; }
.hokiwin77-refined .promo-hero { padding:64px 0 96px; }
.hokiwin77-refined .hero-copy { max-width:820px; }
.hokiwin77-refined .promo-hero h1 { font-weight:500; letter-spacing:-2.5px; line-height:1.12; }
.hokiwin77-refined .promo-hero h1 em { color:var(--text); }
.hokiwin77-refined .promo-hero .intro { max-width:560px; font-size:18px; line-height:1.7; color:var(--muted); margin:24px auto 32px; }
.hokiwin77-refined .hero-offer { box-shadow:none; border-radius:20px; padding:24px; margin-bottom:28px; }
.hokiwin77-refined .hero-offer>span { margin-bottom:8px; }
.hokiwin77-refined .button { border-radius:999px; }
.hokiwin77-refined .reasons-section { border:0; padding:0 0 72px; }
.hokiwin77-refined .reasons-section .section-heading { margin-bottom:44px; }
.hokiwin77-refined .section-heading h2,.hokiwin77-refined .guide-heading h2 { font-weight:500; font-size:40px; letter-spacing:-1.4px; line-height:1.2; }
.hokiwin77-refined .section-heading h2 { color:var(--muted); }
.hokiwin77-refined .section-heading h2 em { color:var(--text); }
.hokiwin77-refined .quick-benefits { gap:18px; }
.hokiwin77-refined .quick-benefits article { padding:32px 24px; background:var(--panel); border:0; border-radius:20px; }
.hokiwin77-refined .quick-benefits article>span { margin-bottom:24px; }
.hokiwin77-refined .quick-benefits h3 { font-weight:500; font-size:22px; line-height:1.3; }
.hokiwin77-refined .quick-benefits p { color:var(--muted); font-size:16px; line-height:1.6; margin-top:12px; }
.hokiwin77-refined .extra-perks { border-top:0; padding-top:0; margin-top:28px; color:#d8d8db; }
.hokiwin77-refined .perks-note { color:var(--muted); }
.hokiwin77-refined .trust-section { border:0; border-radius:20px; background:var(--panel); padding:32px; margin-bottom:0; }
.hokiwin77-refined .trust-section>strong { font-size:20px; font-weight:500; margin-bottom:8px; }
.hokiwin77-refined .trust-section>span { color:var(--muted); }
.hokiwin77-refined .apk-guide { padding:96px 0 72px; }
.hokiwin77-refined .guide-heading { margin-bottom:36px; }
.hokiwin77-refined .guide-heading h2 { color:var(--text); }
.hokiwin77-refined .guide-heading h2 em { color:var(--muted); }
.hokiwin77-refined .guide-heading>p { font-size:17px; line-height:1.7; color:var(--muted); margin-top:20px; }
.tutorial-video { width:100%; max-width:1000px; aspect-ratio:16/9; margin:0 auto 32px; border:1px solid var(--line); border-radius:24px; overflow:hidden; background:radial-gradient(ellipse at 50% 20%,#2b2b2e 0%,#191a1d 70%); }
.video-placeholder { min-height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:30px; }
.video-label { font-size:11px; letter-spacing:2px; color:var(--muted); margin-bottom:26px; }
.video-symbol { display:grid; place-items:center; padding-left:4px; width:68px; height:68px; font-size:25px; border:1px solid #63646a; background:#ffffff08; color:#d6d6d9; border-radius:50%; margin-bottom:22px; }
.video-placeholder>strong { font-size:clamp(26px,3vw,38px); font-weight:500; line-height:1.25; letter-spacing:-1px; }
.video-placeholder>strong>span { color:var(--muted); }
.video-placeholder p { font-size:14px; color:var(--muted); margin:16px 0 20px; }
.video-status { font-size:10px; letter-spacing:1.4px; color:#b7b7bb; border:1px solid #424348; border-radius:999px; padding:6px 12px; }
.steps-intro { text-align:center; color:var(--muted); font-size:14px; margin:0 0 24px; }
.hokiwin77-refined .install-short { margin-bottom:32px; }
.hokiwin77-refined .install-details { border-radius:16px; background:var(--panel); border-color:var(--line); }
.hokiwin77-refined .guide-step { background:#202125; border-color:var(--line); }
.hokiwin77-refined .guide-cta { margin-top:32px; }
.hokiwin77-refined .compact-faq { border:0; border-radius:24px; padding:44px 40px; margin-bottom:0; background:var(--panel); }
.hokiwin77-refined .faq-intro { margin-bottom:28px; }
.hokiwin77-refined .faq-intro h2 { font-size:32px; font-weight:500; }
.hokiwin77-refined .faq-items summary { font-size:17px; font-weight:500; padding-top:22px; padding-bottom:22px; }
.hokiwin77-refined .faq-items p { color:var(--muted); }
.hokiwin77-refined .registration { border:0; padding:96px 0 72px; }
.hokiwin77-refined .registration-copy { margin-bottom:36px; }
.hokiwin77-refined .registration-copy h2 { font-size:36px; font-weight:500; line-height:1.25; }
.hokiwin77-refined .registration-copy h2 em { color:var(--muted); }
.hokiwin77-refined .registration-copy>p:last-child { font-size:17px; color:var(--muted); margin-top:18px; }
.hokiwin77-refined .registration .form-card { background:var(--panel); border-color:var(--line); border-radius:24px; padding:32px; }
.hokiwin77-refined .registration input,.hokiwin77-refined .registration select { background:#111214; border-color:#494a50; }
.hokiwin77-refined .registration input::placeholder { color:#a0a1a7; }
.hokiwin77-refined footer { border-top:1px solid var(--line); }
@media(max-width:700px) {
 .hokiwin77-refined .wrap { width:calc(100% - 40px); }
 .hokiwin77-refined header { height:72px; }
 .hokiwin77-refined .promo-hero { padding:32px 0 60px; }
 .hokiwin77-refined .promo-hero .intro { font-size:16px; margin:20px auto 24px; }
 .hokiwin77-refined .hero-offer { padding:20px 16px; }
 .hokiwin77-refined .reasons-section { padding-bottom:40px; }
 .hokiwin77-refined .reasons-section .section-heading { margin-bottom:28px; }
 .hokiwin77-refined .section-heading h2,.hokiwin77-refined .guide-heading h2 { font-size:32px; }
 .hokiwin77-refined .quick-benefits { gap:12px; max-width:none; }
 .hokiwin77-refined .quick-benefits article { padding:22px 18px; border-radius:16px; }
 .hokiwin77-refined .quick-benefits article>span { margin:2px 0 0; }
 .hokiwin77-refined .quick-benefits h3 { font-size:20px; }
 .hokiwin77-refined .quick-benefits p { font-size:14px; margin:6px 0 0; }
 .hokiwin77-refined .trust-section { padding:24px 18px; border-radius:16px; }
 .hokiwin77-refined .apk-guide { padding:60px 0 40px; }
 .hokiwin77-refined .guide-heading>p { font-size:16px; margin-top:14px; }
 .tutorial-video { aspect-ratio:4/3; border-radius:16px; }
 .video-placeholder { padding:22px 12px; }
 .video-label { margin-bottom:16px; font-size:10px; }
 .video-symbol { width:44px; height:44px; font-size:18px; margin-bottom:14px; }
 .video-placeholder>strong { font-size:26px; }
 .video-placeholder p { font-size:12px; margin:12px 0; }
 .video-status { font-size:9px; }
 .hokiwin77-refined .compact-faq { padding:28px 20px; border-radius:16px; }
 .hokiwin77-refined .faq-intro h2 { font-size:28px; }
 .hokiwin77-refined .faq-items summary { font-size:15px; }
 .hokiwin77-refined .registration { padding:60px 0 40px; }
 .hokiwin77-refined .registration-copy h2 { font-size:30px; }
 .hokiwin77-refined .registration .form-card { padding:22px 18px; border-radius:16px; }
}
@media(max-width:700px) { .tutorial-video { min-height:310px; } }

/* Keep placeholder hints quieter than labels and entered values. */
.hokiwin77-refined .registration input::placeholder {
  font-family:'xVf',sans-serif;
  font-size:14px;
  font-weight:400;
  color:#85868d;
  opacity:1;
  letter-spacing:0;
}

/* A coupon silhouette with edge notches and a perforated tear-off stub. */
.hokiwin77-refined .hero-offer.promo-ticket {
  position:relative;
  max-width:530px;
  padding:0;
  border:0;
  border-radius:16px;
  background:linear-gradient(120deg,#ffe779 0%,#ffd43b 65%,#f5c62b 100%);
  filter:drop-shadow(0 10px 14px #0004);
  box-shadow:inset 0 1px 0 #fff8;
}
.ticket-main { padding:25px 30px 24px; position:relative; }
.ticket-main::before { content:''; position:absolute; inset:9px 10px 0; border:1px solid #71570833; border-bottom:0; border-radius:9px 9px 0 0; pointer-events:none; }
.ticket-label { display:block; font-size:10px; font-weight:500; letter-spacing:1.7px; color:#574216; margin-bottom:12px; }
.ticket-main>strong { display:block; font-size:28px; line-height:1.25; color:#21190b; }
.hokiwin77-refined .ticket-main b { font-size:48px; line-height:1.1; color:#21190b; }
.ticket-main>small { display:block; color:#574216; font-size:12px; margin-top:14px; }
.ticket-stub { position:relative; display:flex; align-items:center; justify-content:space-between; padding:14px 30px; border-top:2px dashed #6d521b66; background:#c4900012; border-radius:0 0 16px 16px; color:#574216; font-size:9px; font-weight:700; letter-spacing:1.7px; }
.ticket-stub::before,.ticket-stub::after { content:''; position:absolute; top:-12px; width:22px; height:22px; background:var(--bg); border-radius:50%; }
.ticket-stub::before { left:-11px; }
.ticket-stub::after { right:-11px; }
.ticket-star { font-size:18px; line-height:1; }
@media(max-width:700px) {
 .hokiwin77-refined .hero-offer.promo-ticket { padding:0; }
 .ticket-main { padding:23px 18px 22px; }
 .ticket-main>strong { font-size:24px; }
 .hokiwin77-refined .ticket-main b { font-size:40px; }
 .ticket-stub { padding:13px 22px; font-size:9px; letter-spacing:1.2px; }
}

.hokiwin77-refined .promo-hero h1 .headline-highlight { color:var(--accent); }

/* Benefit subtitles match the trust-strip text size. */
.hokiwin77-refined .quick-benefits p { font-size:14px; }
@media(max-width:700px) {
 .hokiwin77-refined .quick-benefits p { font-size:12px; }
}

/* Preserve all tutorial content at the original landscape aspect ratio. */
.hokiwin77-refined .tutorial-video.has-video { aspect-ratio:16/9; min-height:0; background:#000; }
.tutorial-video video { display:block; width:100%; height:100%; aspect-ratio:16/9; object-fit:contain; }

/* Supplied hokiwin77 artwork, centered in the top header. */
.hokiwin77-refined header.logo-header { height:auto; justify-content:center; padding:22px 0 0; }
.hokiwin77-refined .logo-brand { display:block; width:142.5px; height:90px; position:relative; overflow:hidden; }
.logo-brand img { display:block; width:100%; height:auto; position:absolute; top:50%; transform:translateY(-50%); }
@media(max-width:700px) {
 .hokiwin77-refined header.logo-header { padding-top:16px; }
 .hokiwin77-refined .logo-brand { width:112.5px; height:72px; }
}

/* Compact footer branding. */
.hokiwin77-refined .logo-brand.footer-logo { width:71.25px; height:45px; }
@media(max-width:700px) {
 .hokiwin77-refined .logo-brand.footer-logo { width:56.25px; height:36px; }
}

/* User-supplied testimonial. */
.hokiwin77-refined .testimonial-section { display:flex; flex-direction:column; gap:18px; padding:40px 32px; }
.testimonial-section .eyebrow { margin:0; color:var(--accent); font-size:11px; letter-spacing:2px; }
.testimonial-section blockquote { max-width:740px; margin:0; font-size:22px; font-weight:400; line-height:1.6; color:var(--muted); }
.testimonial-section blockquote strong { color:var(--text,#f5f5f6); font-weight:500; }
@media(max-width:700px) {
 .hokiwin77-refined .testimonial-section { padding:28px 22px; gap:14px; }
 .testimonial-section blockquote { font-size:18px; line-height:1.55; }
}

/* Social-style testimonial cards. */
.hokiwin77-refined .tweet-section { background:none; padding:36px 0; gap:24px; }
.tweet-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; width:100%; }
.tweet-card { display:flex; flex-direction:column; text-align:left; padding:28px; border:1px solid #343539; border-radius:20px; background:var(--panel); min-width:0; }
.tweet-profile { display:flex; gap:12px; align-items:center; margin-bottom:22px; }
.tweet-avatar { width:46px; height:46px; border-radius:50%; overflow:hidden; flex-shrink:0; background:#d9b559; color:#655025; }
.tweet-avatar svg { width:100%; height:100%; fill:currentColor; }
.tweet-avatar.avatar-2 { background:#a1bacd; color:#41586c; }
.tweet-identity { display:flex; flex-direction:column; gap:3px; }
.tweet-identity strong { font-size:15px; color:#f5f5f6; font-weight:500; }
.tweet-identity span { color:var(--muted); font-size:13px; }
.tweet-quote { margin-left:auto; font-size:48px; line-height:1; color:var(--accent); }
.tweet-section .tweet-card blockquote { font-size:18px; line-height:1.6; color:#dddde0; margin:0 0 24px; flex:1; }
.tweet-section .tweet-card blockquote strong { color:var(--accent); font-weight:500; }
.tweet-time { font-size:11px; line-height:1.6; color:#9b9ca2; }
.tweet-time span { color:#898a90; }
.tweet-bottom { border-top:1px solid #343539; margin-top:16px; padding-top:14px; display:flex; gap:22px; color:#a9aaaf; font-size:20px; align-items:center; }
.tweet-bottom span:last-child { margin-left:auto; font-size:11px; }
@media(max-width:700px) {
 .tweet-grid { grid-template-columns:1fr; gap:16px; }
 .hokiwin77-refined .tweet-section { padding:24px 0; }
 .tweet-card { padding:22px; border-radius:16px; }
 .tweet-section .tweet-card blockquote { font-size:16px; }
}

.testimonial-rating { display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:-8px; }
.testimonial-rating>span { color:var(--accent); font-size:28px; letter-spacing:5px; line-height:1.2; }
.testimonial-rating>strong { color:var(--muted); font-size:13px; font-weight:400; }

.hokiwin77-refined .testimonial-title { margin:0; max-width:960px; text-align:center; font-size:clamp(36px,5.2vw,64px); line-height:1.12; font-weight:700; letter-spacing:-1.8px; color:#f5f5f6; }
.testimonial-title span { color:var(--accent); }
.hokiwin77-refined .tweet-section .testimonial-rating { margin-top:0; margin-bottom:8px; }
@media(max-width:700px) { .hokiwin77-refined .testimonial-title { font-size:36px; letter-spacing:-1px; } }

/* Stacked primary action and consistent yellow heading accents. */
.hokiwin77-refined .hero-action-row { flex-direction:column; align-items:center; gap:14px; }
.hokiwin77-refined .hero-action-row .secondary-link { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:10px 18px; min-height:44px; border:1px solid transparent; border-radius:999px; text-decoration:none; transition:color .2s, background-color .2s, border-color .2s, transform .2s; }
.hokiwin77-refined .hero-action-row .secondary-link span { display:inline-block; transition:transform .2s; }
.hokiwin77-refined .hero-action-row .secondary-link:hover,
.hokiwin77-refined .hero-action-row .secondary-link:focus-visible { color:var(--accent); background:#ffd43b12; border-color:#ffd43b66; transform:translateY(-2px); }
.hokiwin77-refined .hero-action-row .secondary-link:hover span,
.hokiwin77-refined .hero-action-row .secondary-link:focus-visible span { transform:translate(3px,-3px); }
.hokiwin77-refined .heading-accent,
.hokiwin77-refined .section-heading h2 em,
.hokiwin77-refined .guide-heading h2 em,
.hokiwin77-refined .registration-copy h2 em,
.hokiwin77-refined h3 b { color:var(--accent); }
@media(prefers-reduced-motion:reduce) {
 .hokiwin77-refined .hero-action-row .secondary-link,
 .hokiwin77-refined .hero-action-row .secondary-link span { transition:none; transform:none; }
}

/* Supplied transparent ticket artwork, preserved at its original ratio. */
.hokiwin77-refined .hero-offer.promo-ticket { width:100%; max-width:640px; aspect-ratio:1590/720; container-type:inline-size; padding:0; border:0; border-radius:0; background:transparent url('/brands/hokiwin77/images/promo-ticket.webp') center/100% 100% no-repeat; box-shadow:none; }
.promo-ticket .ticket-main { position:absolute; top:12%; left:17%; width:66%; height:57%; padding:0; display:flex; flex-direction:column; justify-content:center; align-items:center; }
.promo-ticket .ticket-main::before,.promo-ticket .ticket-stub::before,.promo-ticket .ticket-stub::after { content:none; }
.promo-ticket .ticket-label { font-size:1.7cqw; letter-spacing:.22cqw; margin:0 0 1.6cqw; color:#464646; }
.promo-ticket .ticket-main>strong { font-size:4.7cqw; line-height:1.13; color:#171717; }
.hokiwin77-refined .promo-ticket .ticket-main b { font-size:7.4cqw; line-height:1.05; color:#171717; }
.promo-ticket .ticket-main>small { font-size:2cqw; margin-top:1.6cqw; color:#464646; }
.promo-ticket .ticket-stub { position:absolute; top:79%; left:12%; width:76%; height:13%; padding:0; border:0; border-radius:0; background:none; font-size:1.5cqw; letter-spacing:.23cqw; color:#444; }
.promo-ticket .ticket-star { visibility:hidden; }

/* Compact opening section: keep the main action within common laptop viewports. */
.hokiwin77-refined header.logo-header { padding-top:12px; }
.hokiwin77-refined .promo-hero { padding:18px 0 48px; }
.hokiwin77-refined .hero-copy .eyebrow { margin:0 0 12px; }
.hokiwin77-refined .promo-hero h1 { font-size:clamp(40px,6.5svh,60px); line-height:1.08; }
.hokiwin77-refined .promo-hero .intro { font-size:16px; line-height:1.5; max-width:620px; margin:16px auto 18px; }
.hokiwin77-refined .hero-offer.promo-ticket { max-width:clamp(380px,65svh,560px); margin-bottom:14px; }
.hokiwin77-refined .hero-action-row { gap:4px; }
.hokiwin77-refined .hero .micro { margin-top:4px; }
@media(max-width:700px) {
 .hokiwin77-refined header.logo-header { padding-top:12px; }
 .hokiwin77-refined .promo-hero { padding:16px 0 36px; }
 .hokiwin77-refined .promo-hero h1 { font-size:clamp(32px,8.4vw,44px); letter-spacing:-1.2px; line-height:1.1; }
 .hokiwin77-refined .promo-hero .intro { font-size:15px; line-height:1.5; margin:14px auto 16px; }
 .hokiwin77-refined .hero-offer.promo-ticket { max-width:100%; margin-bottom:16px; }
 .hokiwin77-refined .hero-button { width:min(100%,320px); }
 .hokiwin77-refined .hero .micro { font-size:11px; }
 .promo-ticket .ticket-label { font-size:2.2cqw; }
 .promo-ticket .ticket-main>small { font-size:2.6cqw; }
 .promo-ticket .ticket-stub { font-size:2cqw; }
}
@media(min-width:701px) and (max-height:700px) {
 .hokiwin77-refined .logo-brand:not(.footer-logo) { width:112.5px; height:72px; }
 .hokiwin77-refined .promo-hero { padding-top:10px; }
 .hokiwin77-refined .promo-hero .intro { margin:12px auto; }
}

/* Sticky download bar: landing only, phone and desktop. */
.hokiwin77-refined[data-variant="landing"] {
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}
.hokiwin77-refined[data-variant="landing"] .registration {
  padding-bottom: calc(48px + 96px);
}
.hokiwin77-refined[data-variant="landing"] footer {
  padding-bottom: calc(32px + 96px);
}
.hokiwin77-refined[data-variant="landing"] .mobile-cta {
  display: flex;
  position: fixed;
  z-index: 40;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px max(12px, env(safe-area-inset-bottom, 0px));
  background: #211e16f5;
  border-top: 1px solid #68582c;
  backdrop-filter: blur(12px);
}
.hokiwin77-refined[data-variant="landing"] .mobile-cta > span {
  display: block;
  font-size: 10px;
  color: var(--muted);
}
.hokiwin77-refined[data-variant="landing"] .mobile-cta strong {
  display: block;
  font-size: 11px;
  color: var(--text);
  margin-top: 4px;
}
.hokiwin77-refined[data-variant="landing"] .mobile-cta .small {
  width: auto;
  min-height: 48px;
  font-size: 12px;
  padding: 12px 16px;
  min-width: 0;
}
@media (max-width: 380px) {
  .hokiwin77-refined[data-variant="landing"] .mobile-cta > span { display: none; }
  .hokiwin77-refined[data-variant="landing"] .mobile-cta .small { width: 100%; }
}
.wa-row {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #121318;
}
.wa-dial {
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--green);
  border-right: 1px solid var(--line);
  flex: none;
}
.wa-row input {
  border: 0;
  flex: 1;
  min-width: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
.wa-row input:focus {
  box-shadow: none;
}
.hokiwin-thanks {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: #0d0e10f2;
}
.hokiwin-thanks-panel {
  width: min(440px, 100%);
  padding: 36px 24px 32px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #191a1d;
  text-align: center;
}
.hokiwin-thanks-panel .logo-brand {
  margin: 0 auto 18px;
}
.hokiwin-thanks-panel .eyebrow {
  margin-bottom: 10px;
}
.hokiwin-thanks-panel h2 {
  font-size: 32px;
  letter-spacing: -1px;
  margin: 0 0 12px;
}
.hokiwin-thanks-panel p:last-child {
  margin: 0;
  color: var(--muted);
}

#daftar { scroll-margin-top: 24px; }
#register-form input,#register-form select,
.hokiwin77-refined[data-variant="landing"] #register-form .submit {
  scroll-margin-bottom: 110px;
}

/* 2027 hero message. */
.hokiwin77-refined .trust-hero-title .headline-highlight { display:block; }
.hokiwin77-refined .trust-hero-intro strong { color:#f5f5f6; font-weight:700; }
.hokiwin77-refined .promo-hero .trust-hero-intro { max-width:650px; }

/* Wide Hokiwin77 artwork inside its original square transparent canvas. */
.hokiwin77-refined .logo-brand:not(.footer-logo) { width:188.5px; height:45.5px; }
.hokiwin77-refined .logo-brand.footer-logo { width:130px; height:32.5px; }
@media(max-width:700px) {
 .hokiwin77-refined .logo-brand:not(.footer-logo) { width:149.5px; height:36.4px; }
 .hokiwin77-refined .logo-brand.footer-logo { width:110px; height:27.5px; }
}

/* Match x.ai typography: regular text and medium headings. */
.hokiwin77-refined { font-weight:400; }
.hokiwin77-refined h1,.hokiwin77-refined h2,.hokiwin77-refined h3 { font-weight:500; }

/* Dark gold Hokiwin77 ticket artwork. */
.hokiwin77-refined .promo-ticket .ticket-main>strong { color:#fff7df; }
.hokiwin77-refined .promo-ticket .ticket-main b { color:#ffd43b; }
.hokiwin77-refined .promo-ticket .ticket-label,
.hokiwin77-refined .promo-ticket .ticket-main>small,
.hokiwin77-refined .promo-ticket .ticket-stub { color:#f0e3c1; }

.hokiwin77[data-variant="ms"] .hokiwin-modal {
  position: static;
  display: block;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 16px 0 48px;
  background: transparent;
  overflow: visible;
}
.hokiwin77[data-variant="ms"] .hokiwin-modal .form-card {
  width: min(640px, 100%);
  margin: 0 auto;
}
.hokiwin77[data-variant="ms"] .registration-copy {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.hokiwin77[data-variant="ms"] {
  overflow: auto;
}

/* Keep BUAT AKUN above the landing sticky bar. */
.hokiwin77-refined[data-variant="landing"] .registration .form-card {
  padding-bottom: calc(32px + 88px);
}
@media (max-width: 700px) {
  .hokiwin77-refined[data-variant="landing"] .registration .form-card {
    padding-bottom: calc(22px + 88px);
  }
}