/* FNA Eco v6.0.8 — mobile-only reflow against supplied official mobile captures.
   Source scope: layout/styling only. No wallet, payment, staking or API behavior changed.
   This file deliberately follows legacy style.css to isolate previous 3,700+ !important overrides. */
:root { --mobile-fna-bg:#f8fbf9; --mobile-fna-line:#dfe6e1; --mobile-fna-primary:#0bab66; }
[hidden] { display:none!important; }

/* Shared shell — desktop navigation remains available without extra rows. */
.header.header {
  box-sizing:border-box!important; display:block!important; width:100%!important;
  height:67px!important; min-height:67px!important; padding:0!important;
  margin:0!important; position:sticky!important; top:0!important; z-index:40!important;
  border:0!important; border-bottom:1px solid var(--mobile-fna-line)!important;
  background:rgba(248,251,249,.94)!important; -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.header > .header-inner {
  box-sizing:border-box!important; width:100%!important; max-width:1080px!important;
  height:100%!important; min-height:0!important; margin:0 auto!important;
  padding:0 24px!important; display:flex!important; flex-direction:row!important;
  flex-wrap:nowrap!important; gap:16px!important; align-items:center!important;
  justify-content:space-between!important;
}
.header .header-inner .brand {
  display:inline-flex!important; align-items:center!important; flex:0 0 auto!important;
  width:auto!important; min-width:0!important; margin:0!important; gap:0!important;
}
.header .header-inner .brand .brand-image {
  display:block!important; width:auto!important; height:42px!important; max-height:42px!important;
  max-width:125px!important; flex:none!important; object-fit:contain!important;
}
.header .header-inner nav.site-nav {
  display:flex!important; flex:1 1 auto!important; width:auto!important; min-width:0!important;
  order:0!important; margin:0!important; padding:0!important;
  align-items:center!important; justify-content:center!important; gap:24px!important;
  overflow:visible!important;
}
.header .header-inner nav.site-nav a {
  font:600 12.5px/1.25 Inter,system-ui,-apple-system,sans-serif!important;
  text-decoration:none!important; color:#454e49!important; letter-spacing:.08em!important;
  white-space:nowrap!important;
}
.header .header-inner nav.site-nav a:hover,.header .header-inner nav.site-nav a.active {
  color:var(--mobile-fna-primary)!important;
}
.header .header-inner .header-actions {
  display:flex!important; width:auto!important; flex:0 0 auto!important;
  align-items:center!important; gap:10px!important; margin:0!important; padding:0!important;
}
.header .site-burger {
  display:none!important; align-items:center!important; justify-content:center!important;
  flex:0 0 38px!important; width:38px!important; height:38px!important;
  padding:0!important; border:1px solid var(--mobile-fna-line)!important; border-radius:10px!important;
  background:#fff!important; color:#454e49!important; cursor:pointer!important; box-shadow:none!important;
}
.header .site-burger .burger-close { display:none; }
.header .site-burger[aria-expanded="true"] .burger-icon { display:none; }
.header .site-burger[aria-expanded="true"] .burger-close { display:block; }
.header .header-actions .lang-shell { position:relative!important; flex:0 0 auto!important; }
.header .header-actions .lang-shell .lang-trigger {
  display:inline-flex!important; align-items:center!important; justify-content:center!important;
  width:auto!important; min-width:64px!important; height:40px!important; min-height:40px!important;
  padding:0 10px!important; margin:0!important; gap:7px!important;
  border:1px solid var(--mobile-fna-line)!important; border-radius:10px!important;
  background:#fff!important; box-shadow:none!important; color:#66768e!important;
}
.header .header-actions .lang-trigger .lang-flag {
  width:21px!important; min-width:21px!important; max-width:21px!important;
  height:16px!important; min-height:16px!important; object-fit:cover!important; border-radius:3px!important;
}
.header .header-actions .lang-trigger .lang-name { font-size:13px!important; }
.header .header-actions .lang-trigger .lang-chevron { display:inline-block!important; font-size:18px!important; line-height:1!important; }
.header .header-actions .wallet-cta {
  display:inline-flex!important; align-items:center!important; justify-content:center!important;
  flex:0 0 auto!important; width:auto!important; min-width:42px!important;
  height:40px!important; min-height:40px!important; margin:0!important; padding:0 16px!important;
  gap:8px!important; border:0!important; border-radius:10px!important; background:#0bab66!important;
  color:#fff!important; font:600 14px/1 Inter,system-ui,sans-serif!important;
  white-space:nowrap!important; box-shadow:0 1px 2px #10b9814d!important;
}
.header .wallet-icon { display:block!important; flex:0 0 18px!important; width:18px!important; height:18px!important; }
.header .wallet-cta-label { display:inline!important; }
.header .mobile-menu { display:none!important; }

@media(max-width:720px) {
  html,body { width:100%!important; max-width:100%!important; margin:0!important; padding:0!important; overflow-x:clip!important; }
  body{background:var(--mobile-fna-bg)!important;}
  #app { max-width:100%!important; min-width:0!important; overflow-x:clip!important; }
  .header.header {
    height:65px!important; min-height:65px!important; padding:0!important;
    flex-wrap:nowrap!important; overflow:visible!important;
  }
  .header > .header-inner {
    width:100%!important; max-width:none!important;
    padding:0 14px!important; gap:8px!important; flex-wrap:nowrap!important;
  }
  .header .header-inner .brand { flex:0 1 auto!important; min-width:0!important; }
  .header .header-inner .brand .brand-image {
    width:clamp(89px,26vw,112px)!important;
    height:auto!important; max-height:38px!important; max-width:112px!important;
  }
  .header .header-inner nav.site-nav {display:none!important; visibility:hidden!important; width:0!important; flex:none!important;}
  .header .header-inner .header-actions { flex:0 0 auto!important; gap:9px!important; }
  .header .header-inner .site-burger {display:inline-flex!important;}
  .header .header-actions .lang-shell .lang-trigger {
    width:64px!important; min-width:64px!important; max-width:64px!important; height:40px!important;
    padding:0 8px!important; gap:7px!important; border-radius:10px!important;
  }
  .header .header-actions .lang-trigger .lang-name {display:none!important;}
  .header .header-actions .wallet-cta {
    width:40px!important; min-width:40px!important; max-width:40px!important;
    height:40px!important; min-height:40px!important; padding:0!important; border-radius:10px!important;
  }
  .header .header-actions .wallet-cta-label {display:none!important;}
  .header .header-actions .wallet-icon {display:block!important;}
  .header .header-actions .lang-menu {
    position:absolute!important; right:0!important; top:calc(100% + 6px)!important; left:auto!important;
    z-index:70!important; width:min(292px,calc(100vw - 28px))!important;
    max-height:calc(100dvh - 110px)!important; overflow:auto!important;
    border-radius:12px!important; background:#fff!important; box-shadow:0 15px 35px #0e121030!important;
  }
  .header nav.mobile-menu:not([hidden]) {
    position:absolute!important; top:calc(100% + 5px)!important; right:14px!important; left:auto!important;
    z-index:60!important; width:min(240px,calc(100vw - 28px))!important; min-width:0!important;
    max-width:calc(100vw - 28px)!important; display:flex!important; flex:none!important;
    flex-direction:column!important; align-items:stretch!important; justify-content:flex-start!important;
    gap:2px!important; margin:0!important; padding:7px!important;
    overflow:visible!important; border:1px solid var(--mobile-fna-line)!important;
    border-radius:12px!important; background:#fff!important; box-shadow:0 14px 30px #0e121023!important;
  }
  .header nav.mobile-menu a {
    display:block!important; height:auto!important; padding:11px 13px!important; margin:0!important;
    border-radius:9px!important; color:#333b36!important;
    font:600 14px/1.25 Inter,system-ui,sans-serif!important; letter-spacing:0!important;
    text-decoration:none!important; white-space:normal!important;
  }
  .header nav.mobile-menu a:hover,.header nav.mobile-menu a.active { background:#e3fbe9!important; color:#067a49!important; }
  /* Hero and Passport overview */
  .hero {
    display:grid!important; grid-template-columns:minmax(0,1fr)!important; width:100%!important;
    max-width:100%!important; height:auto!important; min-height:0!important;
    margin:0 auto!important; padding:36px 20px 18px!important;
    gap:22px!important; box-sizing:border-box!important;
  }
  .hero-copy,.hero-visual { width:100%!important; max-width:100%!important; min-width:0!important; }
  .hero .eyebrow { font-size:11px!important; line-height:1.4!important; letter-spacing:2px!important; }
  .hero h1 {
    font-size:44px!important; line-height:0.99!important;
    letter-spacing:-0.66px!important; margin:14px 0 15px!important;
    overflow-wrap:normal!important; word-break:normal!important;
  }
  .hero .intro { max-width:100%!important; font-size:17px!important; line-height:1.65!important; }
  .hero .countdown { box-sizing:border-box!important; width:100%!important; max-width:100%!important; margin:18px 0 0!important; padding:12px!important; }
  .hero .clock { display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:6px!important; width:100%!important; }
  .hero .clock>div{width:auto!important;min-width:0!important;padding:8px 4px!important;}
  .hero .clock strong{font-size:clamp(19px,6vw,24px)!important;}
  .hero .hero-actions {flex-wrap:wrap!important;gap:12px!important;margin-top:20px!important;}
  .hero .claim,.hero .view-tiers{max-width:100%!important;}
  .hero .hero-visual { min-height:0!important; margin:0!important; padding:0!important; }
  .hero .passport-motion { width:min(100%,300px)!important; max-width:300px!important; margin:0 auto!important; }
  .hero .passport-reference { display:block!important; width:100%!important; height:auto!important; max-width:300px!important; }
  .total-paid {width:calc(100% - 40px)!important;margin:0 auto 32px!important;min-height:0!important;}
  .tiers-section,.content-section.passport-benefits-section,.stake-section {
    box-sizing:border-box!important; width:calc(100% - 40px)!important; max-width:none!important;
    margin:0 auto!important; padding:24px 0!important;
  }
  .tiers-section .section-head,.passport-benefits-head {
    display:flex!important; align-items:flex-start!important; flex-direction:column!important; gap:8px!important;
    margin:0 0 18px!important;
  }
  .tiers-section .section-head h2,.passport-benefits-head h2{font-size:25px!important;line-height:1.15!important;margin:5px 0!important;}
  #tiers .tier-list{width:100%!important;max-width:none!important;}
  #tiers .tier-row {width:100%!important;max-width:100%!important;min-width:0!important;overflow:hidden!important;}
  #tiers .tier-row .tier-name,#tiers .tier-row .tier-value{min-width:0!important;}
  #tiers .tier-row .tier-medal img {display:block!important;object-fit:contain!important;}
  .passport-benefits-section .rights-grid { display:grid!important; width:100%!important; max-width:100%!important; grid-template-columns:1fr!important; gap:12px!important; margin:18px 0!important; }
  .passport-benefits-section .rights-grid article { box-sizing:border-box!important; width:100%!important; max-width:100%!important; min-width:0!important; height:auto!important; min-height:0!important; padding:18px!important; }
  .stake-section>.stake-explainer,.stake-explainer{
    width:100%!important;max-width:100%!important;min-width:0!important;
    margin:8px auto 24px!important;padding:0!important;box-sizing:border-box!important;
  }
  .stake-explainer .stake-bullets{width:100%!important;max-width:100%!important;box-sizing:border-box!important;}
  /* Passport Office — two-column tiers, readable stacked date rates */
  .passport-office{
    box-sizing:border-box!important; width:100%!important; max-width:100%!important;
    padding:35px 20px 72px!important; margin:0 auto!important; overflow:visible!important;
  }
  .office-intro{margin-bottom:23px!important;padding:0!important;}
  .office-intro h1{font-size:clamp(31px,8vw,40px)!important;line-height:1.1!important;}
  .office-tier-grid {display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;width:100%!important;max-width:100%!important;}
  .office-tier-grid .office-tier-card {box-sizing:border-box!important;min-width:0!important;max-width:100%!important;min-height:108px!important;height:auto!important;padding:13px 8px!important;}
  .office-tier-grid .office-tier-card img {max-width:40px!important;max-height:40px!important;object-fit:contain!important;}
  .office-body,.office-purchase-grid,.purchase-grid,.office-form-grid {grid-template-columns:minmax(0,1fr)!important;width:100%!important;max-width:100%!important;}
  .office-purchase-grid>*,.office-body>*,.amount-panel,.office-referrer,.office-flow{min-width:0!important;max-width:100%!important;}
  .amount-panel {box-sizing:border-box!important;padding:20px 16px!important;}
  .amount-control {display:grid!important;grid-template-columns:44px minmax(0,1fr) 44px!important;gap:8px!important;}
  .amount-control input,.amount-control>div{min-width:0!important;max-width:100%!important;}
  .snapshot-quota,.snapshot-quota-head,.extra-rate-schedule{box-sizing:border-box!important;width:100%!important;max-width:100%!important;min-width:0!important;margin-left:0!important;margin-right:0!important;}
  .snapshot-quota{display:block!important;margin-top:36px!important;padding:0!important;}
  .snapshot-quota-head{display:block!important;height:auto!important;min-height:0!important;}
  .snapshot-quota-head h2{font-size:clamp(27px,8vw,34px)!important;line-height:1.12!important;}
  .snapshot-quota-head p{font-size:14px!important;line-height:1.55!important;}
  .extra-rate-schedule{display:block!important;height:auto!important;min-height:0!important;}
  .snapshot-quota .schedule-items{
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;
    gap:8px!important;width:100%!important;max-width:100%!important;height:auto!important;
  }
  .snapshot-quota .schedule-item {
    display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;
    min-width:0!important;max-width:100%!important;height:auto!important;min-height:45px!important;
    margin:0!important;padding:9px 11px!important;gap:10px!important;
  }
  .snapshot-quota .schedule-item .schedule-date{display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:6px!important;min-width:0!important;}
  .snapshot-quota .schedule-item .schedule-values{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-end!important;flex:0 0 auto!important;text-align:right!important;gap:5px!important;}
  .snapshot-quota .schedule-item .schedule-values small{display:none!important;}
  .snapshot-quota .schedule-item span,.snapshot-quota .schedule-item strong{white-space:nowrap!important;writing-mode:horizontal-tb!important;transform:none!important;}
  .snapshot-quota .snapshot-quota-hero,.snapshot-quota .snapshot-quota-top,.snapshot-quota .snapshot-quota-bottom {
    box-sizing:border-box!important;width:100%!important;max-width:100%!important;min-width:0!important;
    height:auto!important;min-height:0!important;overflow:hidden!important;
  }
  .snapshot-quota .snapshot-quota-hero {margin-top:14px!important;padding:18px!important;}
  .snapshot-quota .allocation-upgrade-banner,.snapshot-quota .allocation-summary,
  .snapshot-quota .allocation-after,.snapshot-quota .allocation-adds{
    box-sizing:border-box!important;max-width:100%!important;min-width:0!important;
  }
  /* Logged-out Dashboard and Referrals — official bordered gate cards */
  .dashboard-module__page.dashboard-page,.referrals-module-page.referrals-page{
    display:block!important;box-sizing:border-box!important;width:100%!important;max-width:100%!important;
    min-height:calc(100dvh - 65px)!important;height:auto!important;padding:0!important;margin:0!important;
    background:var(--mobile-fna-bg)!important;
  }
  .dashboard-page .dashboard-module__wrap,.referrals-page .referrals-page-wrap {
    box-sizing:border-box!important;width:100%!important;max-width:100%!important;
    height:auto!important;min-height:calc(100dvh - 65px)!important;
    padding:90px 20px 35px!important;margin:0 auto!important;display:block!important;
  }
  .dashboard-page .dashboard-login-content,.referrals-page .referrals-login-card{
    display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
    box-sizing:border-box!important;text-align:center!important;
    width:100%!important;max-width:520px!important;min-width:0!important;
    min-height:245px!important;height:auto!important;
    margin:0 auto!important;padding:36px 20px!important;
    border:1px solid #c9d4cd!important;border-radius:16px!important;background:#fff!important;box-shadow:none!important;
  }
  .dashboard-page .dashboard-login-content h1,.referrals-page .referrals-login-card h1 {
    font-family:"Iowan Old Style",Palatino,Georgia,serif!important;
    font-size:clamp(23px,6.1vw,28px)!important;font-weight:700!important;line-height:1.18!important;
    white-space:normal!important;width:100%!important;min-width:0!important;
    max-width:400px!important;height:auto!important;min-height:0!important;margin:0 0 16px!important;padding:0!important;
  }
  .dashboard-page .dashboard-login-content p,.referrals-page .referrals-login-card p{
    font-size:14px!important;line-height:1.5!important;max-width:385px!important;
    margin:0 0 20px!important;padding:0!important;color:#444e49!important;
  }
  .dashboard-page .dashboard-login-content button#connect2,.referrals-page .referrals-login-card button#connect2 {
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
    min-width:0!important;width:auto!important;max-width:100%!important;
    min-height:40px!important;height:40px!important;margin:0!important;padding:0 17px!important;
    background:#0bab66!important;color:#fff!important;border:0!important;border-radius:5px!important;
    font:700 14px/1 Inter,system-ui,sans-serif!important;white-space:nowrap!important;
  }
  /* Connected referral page: preserve all original input/button IDs and backend calls. */
  .referrals-account-page,.dashboard-account-page{
    box-sizing:border-box!important;width:100%!important;max-width:100%!important;
    min-height:calc(100dvh - 65px)!important;margin:0!important;padding:0!important;
    background:var(--mobile-fna-bg)!important; overflow-wrap:anywhere!important;
  }
  .referrals-account-wrap,.dashboard-account-wrap {
    box-sizing:border-box!important;width:100%!important;max-width:100%!important;
    padding:30px 20px 70px!important;margin:0 auto!important;
  }
  .referrals-account-wrap>.eyebrow {font-size:12px!important;letter-spacing:2px!important;}
  .referrals-account-wrap>h1{font:700 clamp(38px,10vw,50px)/1.1 "Iowan Old Style",Palatino,Georgia,serif!important;margin:8px 0 24px!important;}
  .referrals-account-wrap .referral-wallet-label{font-size:16px!important;margin:8px 0!important;}
  .referrals-account-wrap .referral-wallet code{font:400 12px/1.4 "IBM Plex Mono",monospace!important;word-break:break-all!important;}
  .referrals-account-wrap .referral-account-section{margin-top:28px!important;}
  .referrals-account-wrap label {display:block!important;margin-bottom:10px!important;color:#454e49!important;}
  .referrals-account-wrap input {
    display:block!important;box-sizing:border-box!important;width:100%!important;max-width:100%!important;
    height:45px!important;min-width:0!important; padding:0 13px!important;
    border:1px solid #c9d4cd!important;border-radius:10px!important;background:#fff!important;
    font-size:14px!important; margin:0 0 14px!important;
  }
  .referrals-account-wrap h2{font-size:23px!important;margin:0 0 12px!important;line-height:1.25!important;}
  .referrals-account-wrap .connect {display:inline-flex!important;align-items:center!important;justify-content:center!important;margin:0!important;padding:0 16px!important;min-height:42px!important; border-radius:10px!important;background:#0bab66!important;}
  .referrals-account-wrap>button#disconnect{margin-top:28px!important;}
  /* Rules table: avoid 540px min-width and horizontal clipping in 390px viewport. */
  .rules-page {box-sizing:border-box!important;width:100%!important;max-width:100%!important;padding:37px 20px 70px!important;margin:0!important;}
  .rules-page .rules-head {margin:0 0 24px!important;padding:0!important;}
  .rules-page .rules-head h1{font-size:clamp(34px,9vw,44px)!important;line-height:1.1!important;margin:14px 0!important;}
  .rules-page .rules-section {box-sizing:border-box!important;width:100%!important;max-width:100%!important;padding:24px 0!important;}
  .rules-page .rules-section h2{font-size:23px!important;margin:0 0 16px!important;}
  .rules-page .rules-section p{font-size:14px!important;line-height:1.58!important;}
  .rules-page .rules-table-wrap {box-sizing:border-box!important;width:100%!important;max-width:100%!important;overflow-x:hidden!important;}
  .rules-page .rules-table {width:100%!important;min-width:0!important;max-width:100%!important;table-layout:fixed!important;border-collapse:collapse!important;}
  .rules-page .rules-table col:nth-child(1){width:35%!important;}
  .rules-page .rules-table col:nth-child(2){width:40%!important;}
  .rules-page .rules-table col:nth-child(3){width:25%!important;}
  .rules-page .rules-table thead th{
    white-space:normal!important;word-break:normal!important;overflow-wrap:anywhere!important;
    font-size:9px!important;letter-spacing:1px!important;line-height:1.2!important;
    padding:0 4px 9px!important;
  }
  .rules-page .rules-table tbody tr{min-height:46px!important;height:auto!important;}
  .rules-page .rules-table tbody td{
    white-space:normal!important;overflow-wrap:anywhere!important;
    font-size:11px!important;line-height:1.25!important;padding:9px 3px!important;
    height:auto!important;min-height:42px!important;
  }
  .rules-page .rules-table .rules-tier-cell {display:flex!important;gap:4px!important;min-width:0!important;align-items:center!important;}
  .rules-page .rules-table .rules-tier-icon {width:20px!important;height:20px!important;flex:0 0 20px!important;}
  .rules-page .rules-table .rules-tier-name {font-size:11px!important;min-width:0!important;white-space:normal!important;}
  .rules-page .rules-table .rules-threshold-cell {font:500 10px/1.35 "IBM Plex Mono",monospace!important;white-space:normal!important;overflow-wrap:anywhere!important;}
  .rules-page .rules-table .rules-bonus-pill {min-width:0!important;max-width:100%!important;height:25px!important;padding:0 6px!important;font-size:11px!important;}
  .rules-page .rules-section .rules-bullet-list li {font-size:14px!important;line-height:1.58!important;padding:12px 0 12px 27px!important;min-height:0!important;}
  .rules-page .rules-section .rules-bullet-list li::before{left:3px!important;top:21px!important;width:8px!important;height:8px!important;border-radius:2px!important;}
  /* Crypto Card: remove 20px horizontal overflow, maintain original vertical flow. */
  .card-page {box-sizing:border-box!important;display:block!important;width:100%!important;max-width:100%!important;margin:0!important;padding:0 20px 70px!important;overflow:visible!important;}
  .card-page section,.card-page section>*{box-sizing:border-box!important;min-width:0!important;max-width:100%!important;}
  .crypto-hero {display:grid!important;grid-template-columns:minmax(0,1fr)!important;width:100%!important;max-width:100%!important;min-height:0!important;height:auto!important;gap:20px!important;margin:0!important;padding:36px 0 36px!important;}
  .crypto-hero-copy {width:100%!important;min-width:0!important;max-width:100%!important;}
  .crypto-hero-copy h1 {font-size:clamp(39px,10vw,50px)!important;line-height:1.02!important;margin:18px 0!important;}
  .crypto-hero-copy p {max-width:100%!important;min-width:0!important;font-size:14px!important;line-height:1.57!important;}
  .crypto-hero-visual{display:block!important;min-width:0!important;max-width:100%!important;width:100%!important;padding:0!important;margin:0!important;}
  .crypto-hero-visual .crypto-card-art {display:flex!important;flex-direction:column!important;box-sizing:border-box!important;width:100%!important;max-width:100%!important;height:auto!important;min-height:210px!important;margin:0!important;aspect-ratio:1.65/1!important;transform:none!important;}
  .crypto-card-number {font-size:clamp(12px,3.1vw,16px)!important;letter-spacing:1.5px!important;white-space:nowrap!important;}
  .crypto-benefits{box-sizing:border-box!important;width:100%!important;max-width:100%!important;min-height:0!important;padding:32px 0!important;margin:0!important;}
  .crypto-benefits h2 {font-size:25px!important;line-height:1.2!important;margin:0 0 20px!important;}
  .crypto-benefit-grid {display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px!important;width:100%!important;max-width:100%!important;margin:0!important;padding:0!important;}
  .crypto-benefit-grid article {box-sizing:border-box!important;width:100%!important;max-width:100%!important;min-height:0!important;height:auto!important;padding:18px!important;}
  .crypto-subscribe-section{box-sizing:border-box!important;display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:22px!important;width:100%!important;max-width:100%!important;min-height:0!important;height:auto!important;margin:0!important;padding:28px 0!important;}
  .crypto-subscribe-copy {box-sizing:border-box!important;width:100%!important;max-width:100%!important;min-width:0!important;}
  .crypto-subscribe-copy h2{font-size:27px!important;margin:0 0 18px!important;}
  .subscription-price{box-sizing:border-box!important;min-width:0!important;max-width:100%!important;background:#101412!important;color:#fff!important;}
  .subscription-price span{color:#baf7cd!important;}
  .subscription-price strong,.subscription-price strong small {color:#fff!important;}
  .crypto-subscribe-form-panel {box-sizing:border-box!important;width:100%!important;max-width:100%!important;min-width:0!important;padding:18px!important;margin:0!important;}
  .crypto-subscribe-form-panel form,.crypto-subscribe-form-panel input{box-sizing:border-box!important;width:100%!important;max-width:100%!important;min-width:0!important;}
  .crypto-important-notice,.crypto-important-notice * {min-width:0!important;max-width:100%!important;}
  /* All routes: narrow content should not force document width wider than viewport. */
  .hero, .passport-office, .card-page, .rules-page,
  .tiers-section,.content-section,.snapshot-quota,.referrals-account-wrap {
    overflow-wrap:break-word;
  }
  /* Footer remains a normal end-of-document element on short logged-out pages. */
  body footer {box-sizing:border-box!important;width:100%!important;max-width:100%!important;padding:24px 20px!important;margin:0!important;flex-direction:column!important;gap:12px!important;}
}
@media(max-width:360px){
  .header > .header-inner {padding:0 10px!important;}
  .header .header-inner .header-actions {gap:6px!important;}
  .header .header-inner .brand .brand-image {width:88px!important;}
  .rules-page .rules-table thead th{font-size:8px!important;letter-spacing:.4px!important;}
  .rules-page .rules-table tbody td{font-size:10px!important;}
}

/* v6.0.7 high-specificity correction: legacy v5.13.0 three-column declarations
   were more specific than the first mobile rule and forced rate descriptions
   into narrow vertical columns. Match the official stacked three-row layout. */
@media(max-width:720px){
  #app main.passport-office section.snapshot-quota .extra-rate-schedule .schedule-items {
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;
    gap:7px!important;max-width:100%!important;width:100%!important;
  }
  #app main.passport-office section.snapshot-quota .extra-rate-schedule .schedule-item {
    display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;
    box-sizing:border-box!important;width:100%!important;max-width:100%!important;
    min-width:0!important;min-height:46px!important;height:auto!important;
    padding:10px 11px!important;gap:8px!important;border-radius:9px!important;
  }
  #app main.passport-office section.snapshot-quota .extra-rate-schedule .schedule-item .schedule-date {
    display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;
    align-items:center!important;justify-content:flex-start!important;
    gap:6px!important;width:auto!important;min-width:0!important;max-width:70%!important;
  }
  #app main.passport-office section.snapshot-quota .extra-rate-schedule .schedule-item .schedule-date span {
    display:inline!important;width:auto!important;max-width:100%!important;
    font-size:12px!important;line-height:1.25!important;white-space:normal!important;
  }
  #app main.passport-office section.snapshot-quota .extra-rate-schedule .schedule-item .schedule-date b {
    display:inline-flex!important;max-width:100%!important;white-space:nowrap!important;
    font-size:9px!important;padding:2px 6px!important;
  }
  #app main.passport-office section.snapshot-quota .extra-rate-schedule .schedule-item .schedule-values {
    display:flex!important;flex-direction:row!important;justify-content:flex-end!important;
    align-items:center!important;flex:0 0 auto!important;width:auto!important;
    min-width:0!important;max-width:30%!important;gap:4px!important;margin:0!important;
  }
  #app main.passport-office section.snapshot-quota .extra-rate-schedule .schedule-item .schedule-values strong {
    display:inline-block!important;font-size:19px!important;line-height:1.1!important;
    white-space:nowrap!important;margin:0!important;
  }
  #app main.passport-office section.snapshot-quota .extra-rate-schedule .schedule-item .schedule-values small {
    display:none!important;visibility:hidden!important;width:0!important;height:0!important;
  }
}


/* v6.0.8 — Japanese Passport allocation section aligned to the supplied official mobile capture.
   Reflow the dark current-allocation panel into the official top-row / bottom-meta arrangement. */
@media(max-width:720px) {
  #app main.passport-office .snapshot-quota .snapshot-quota-hero {
    display:block!important;
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    min-height:0!important;
    height:auto!important;
    padding:22px 20px 18px!important;
    border-radius:16px!important;
    overflow:visible!important;
  }
  #app main.passport-office .snapshot-quota .snapshot-quota-top {
    display:flex!important;
    flex-direction:row!important;
    align-items:flex-start!important;
    justify-content:space-between!important;
    gap:18px!important;
    width:100%!important;
    min-width:0!important;
    height:auto!important;
    overflow:visible!important;
    position:relative!important;
  }
  #app main.passport-office .snapshot-quota .snapshot-quota-main {
    display:block!important;
    flex:1 1 auto!important;
    width:auto!important;
    max-width:none!important;
    min-width:0!important;
  }
  #app main.passport-office .snapshot-quota .snapshot-quota-main .office-kicker {
    margin:0!important;
    font-size:11.5px!important;
    line-height:1.35!important;
    letter-spacing:.14em!important;
  }
  #app main.passport-office .snapshot-quota .snapshot-quota-amount {
    display:block!important;
    margin:10px 0 0!important;
    font-size:44px!important;
    line-height:1.1!important;
    white-space:nowrap!important;
  }
  #app main.passport-office .snapshot-quota .snapshot-quota-amount small {
    margin-inline-start:8px!important;
    font-size:13px!important;
    line-height:1.2!important;
  }
  #app main.passport-office .snapshot-quota .snapshot-quota-note {
    display:block!important;
    width:100%!important;
    max-width:56ch!important;
    margin:10px 0 0!important;
    font-size:13px!important;
    line-height:1.6!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
  #app main.passport-office .snapshot-quota .snapshot-quota-shield {
    display:flex!important;
    flex:0 0 46px!important;
    width:46px!important;
    min-width:46px!important;
    max-width:46px!important;
    height:46px!important;
    min-height:46px!important;
    margin:0!important;
    align-self:flex-start!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:50%!important;
  }
  #app main.passport-office .snapshot-quota .snapshot-quota-shield svg {
    display:block!important;
    width:26px!important;
    height:26px!important;
  }
  #app main.passport-office .snapshot-quota .snapshot-quota-status {
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:baseline!important;
    justify-content:space-between!important;
    gap:10px!important;
    width:100%!important;
    min-width:0!important;
    margin:20px 0 8px!important;
    font-size:12px!important;
    line-height:1.4!important;
  }
  #app main.passport-office .snapshot-quota .snapshot-quota-status>span {
    display:block!important;
    flex:0 0 auto!important;
    white-space:nowrap!important;
    text-align:start!important;
  }
  #app main.passport-office .snapshot-quota .snapshot-quota-status>strong {
    display:block!important;
    flex:0 1 auto!important;
    min-width:0!important;
    white-space:nowrap!important;
    text-align:end!important;
    font-size:12px!important;
    line-height:1.4!important;
  }
  #app main.passport-office .snapshot-quota .snapshot-quota-progress {
    display:block!important;
    width:100%!important;
    height:6px!important;
    margin:0!important;
    border-radius:999px!important;
  }
  #app main.passport-office .allocation-result-grid {
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:12px!important;
    width:100%!important;
    margin:14px 0!important;
  }
  #app main.passport-office .allocation-result-card {
    display:block!important;
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    height:auto!important;
    padding:20px 22px!important;
    box-sizing:border-box!important;
  }
  #app main.passport-office .allocation-upgrade-banner {
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:14px!important;
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    padding:16px 20px!important;
    box-sizing:border-box!important;
  }
  #app main.passport-office .allocation-upgrade-banner button {
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    min-height:44px!important;
    height:auto!important;
  }
}


/* v6.0.9 — Passport Office Japanese purchase card follows the supplied official capture. */
@media(max-width:720px) {
  #app main.passport-office .amount-panel {
    box-sizing:border-box!important;
    padding:30px!important;
    border-radius:14px!important;
  }
  #app main.passport-office .amount-panel>.office-kicker {
    display:block!important;
    margin:0 0 14px!important;
    color:#707d74!important;
    font-size:11px!important;
    font-weight:800!important;
    letter-spacing:.14em!important;
    line-height:1.35!important;
  }
  #app main.passport-office .amount-panel .amount-control {
    display:grid!important;
    grid-template-columns:46px minmax(0,1fr) 46px!important;
    align-items:center!important;
    gap:14px!important;
    margin:14px 0 6px!important;
    text-align:center!important;
  }
  #app main.passport-office .amount-panel .amount-control>button {
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    box-sizing:border-box!important;
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    min-height:46px!important;
    padding:0!important;
    border:1.5px solid #111714!important;
    border-radius:10px!important;
    background:#fff!important;
    color:#111714!important;
    font-size:26px!important;
    font-weight:700!important;
    line-height:1!important;
  }
  #app main.passport-office .amount-panel .amount-control>button:first-child {
    background:#101714!important;
    color:#8cf5ae!important;
  }
  #app main.passport-office .amount-panel .amount-control>div {
    display:flex!important;
    align-items:baseline!important;
    justify-content:center!important;
    gap:8px!important;
    min-width:0!important;
    white-space:nowrap!important;
  }
  #app main.passport-office .amount-panel .amount-control strong {
    color:#111714!important;
    font-size:38px!important;
    font-weight:750!important;
    line-height:1.1!important;
    letter-spacing:-.5px!important;
  }
  #app main.passport-office .amount-panel .amount-control small {
    color:#6e7a72!important;
    font-size:14px!important;
    font-weight:700!important;
  }
  #app main.passport-office .amount-panel .amount-hint {
    display:block!important;
    margin:0 0 8px!important;
    color:#8a958e!important;
    font-size:12px!important;
    line-height:1.5!important;
    text-align:center!important;
  }
  #app main.passport-office .amount-panel .office-summary {
    display:block!important;
    margin:22px 0!important;
    border-top:1px solid #dce5df!important;
  }
  #app main.passport-office .amount-panel .office-summary>div {
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:12px!important;
    min-height:44px!important;
    padding:11px 2px!important;
    border-bottom:1px solid #e1e8e3!important;
    color:#59655d!important;
    font-size:14.5px!important;
    line-height:1.4!important;
  }
  #app main.passport-office .amount-panel .office-summary>div>span {
    color:#59655d!important;
    font-size:14.5px!important;
    font-weight:400!important;
  }
  #app main.passport-office .amount-panel .office-summary>div>strong {
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:8px!important;
    color:#111714!important;
    font-size:15px!important;
    font-weight:750!important;
    text-align:right!important;
    white-space:nowrap!important;
  }
  #app main.passport-office .amount-panel .office-summary>div>strong img {
    width:22px!important;
    height:22px!important;
    object-fit:contain!important;
  }
  #app main.passport-office .amount-panel .office-summary>div>strong b {
    color:#111714!important;
    font-size:15px!important;
    font-weight:750!important;
  }
  #app main.passport-office .amount-panel .office-summary>div.quote-hidden {
    display:none!important;
  }
  #app main.passport-office .amount-panel .office-claim {
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    min-height:46px!important;
    height:46px!important;
    margin:22px 0 0!important;
    padding:0 18px!important;
    border:0!important;
    border-radius:12px!important;
    background:linear-gradient(100deg,#b7f7b9 0%,#a2f3df 100%)!important;
    color:#778b81!important;
    font-size:16px!important;
    line-height:1.2!important;
    font-weight:700!important;
    box-shadow:none!important;
  }
  #app main.passport-office .amount-panel .office-payment-notice {
    margin:14px 0 0!important;
    color:#8a9790!important;
    font-size:12px!important;
    line-height:1.5!important;
    text-align:center!important;
  }
}

/* v6.0.18 mobile size match vs fna.pro */
@media (max-width:760px){
  .header{height:65px!important;min-height:65px!important}
  .header nav a{letter-spacing:.1em!important}
  .hero h1 em{
    background-image:linear-gradient(90deg,#7dffb8 0%,#2fd67a 55%,#12b66a 100%)!important;
    background-size:100% .42em!important;background-position:0 88%!important;background-repeat:no-repeat!important;
    -webkit-box-decoration-break:clone!important;box-decoration-break:clone!important;padding:0 .04em!important;
  }
  .lang-name{display:none!important}
  .lang-trigger{width:64px!important;height:40px!important;min-width:64px!important;padding:0!important}
}

@media (max-width:760px){
  .tiers-section .section-head h2,.tiers-section h2{font-size:30px!important;line-height:1.15!important}
  .header nav a,.mobile-menu a{letter-spacing:1.25px!important}
}