:root{
    --bg:#F3F5EC; --surface:#FFFFFF; --surface-2:#E9EDDC; --border:#DCE3CB;
    --text:#1F241A; --muted:#5C6551; --gold:#7A9A3E; --gold-2:#8FB255;
    --gold-soft:rgba(122,154,62,.04); --vermilion:#d64f42;
    --gold-3:#c9a84c;
    --gold-4:#e4c979;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{background:var(--bg);color:var(--text);font-family:'Inter','Noto Sans JP',sans-serif;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
  .wrap{max-width:1080px;margin:0 auto;padding:0 24px;}
  a{color:inherit;text-decoration:none;}
  .serif{font-family:'Source Serif 4','Noto Serif JP',serif;}
  .serif .jp{
    color:var(--gold);
    font-family:'Source Serif 4','Noto Serif JP',serif;
  }
  .hero-title{
  width:100vw;
  margin-left:calc(50% - 50vw);
  text-align:center;
}

  /* seigaiha (青海波) japanese wave motif — faint, decorative */
  .seigaiha{position:absolute;inset:0;pointer-events:none;opacity:.5;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40'%3E%3Cg fill='none' stroke='%23c9a84c' stroke-opacity='0.06' stroke-width='1'%3E%3Cpath d='M0 40a20 20 0 0140-0 20 20 0 0140 0M-40 40a20 20 0 0140 0 20 20 0 0140 0'/%3E%3Cpath d='M0 30a20 20 0 0140 0 20 20 0 0140 0M-40 30a20 20 0 0140 0 20 20 0 0140 0'/%3E%3Cpath d='M0 20a20 20 0 0140 0 20 20 0 0140 0M-40 20a20 20 0 0140 0 20 20 0 0140 0'/%3E%3C/g%3E%3C/svg%3E");}
  .glow{position:fixed;top:-25%;left:50%;transform:translateX(-50%);width:1000px;height:1000px;pointer-events:none;z-index:0;
    background:radial-gradient(circle,rgba(122,154,62,.10) 0%,transparent 62%);}

  nav{position:sticky;top:0;z-index:30;backdrop-filter:blur(14px);background:rgba(243,245,236,.82);border-bottom:1px solid var(--border);}
  nav .wrap{
  width:100%;
  max-width:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:66px;
  padding:0 48px;
}
    /* Brand */
.brand{
  display:flex;
  align-items:center;
  gap:5px;
  font-weight:800;
  font-size:20px;
  letter-spacing:-.3px;

  /* Dark rounded background */
  background:#0c0f15;
  color:#fff;
  padding:8px 14px;
  border-radius:14px;
}

.brand img{
  height:30px;
  width:30px;
  border-radius:8px;
  object-fit:cover;
}
  /* Japanese text serif styling only */
  .jp-serif{
    font-family:'Source Serif 4','Noto Serif JP',serif;
  }

.brand-name{
  color:#fff;
}

  /* Brand JP gold styling */
  .brand-name .jp{
    color:var(--gold-3);
    font-family:'Source Serif 4','Noto Serif JP',serif;
  }

  /* Remove background from whole brand */
.guide-brand{
  display:flex;
  align-items:center;
  gap:10px;
  background:none;
  padding:0;
}

/* Black pill only around text */
.guide-brand .brand-pill{
  background:#0c0f15;
  padding:8px 14px;
  border-radius:14px;
  display:flex;
  align-items:center;
}

/* White text */
.guide-brand .brand-name{
  color:#fff;
  font-weight:800;
}

/* Gold serif JP */
.guide-brand .brand-name .jp{
  color:var(--gold-3);
  font-family:'Source Serif 4','Noto Serif JP',serif;
}



  .nav-actions{display:flex;align-items:center;gap:20px;}
  .nav-actions .link{color:var(--muted);font-weight:600;font-size:14px;}
  .nav-actions .link:hover{color:var(--text);}
  .lang-toggle{display:inline-flex;border:1px solid var(--border);border-radius:999px;overflow:hidden;font-size:13px;font-weight:600;}
  .lang-toggle button{background:transparent;color:var(--muted);border:0;padding:6px 14px;cursor:pointer;font-family:inherit;}
  .lang-toggle button.active{background:var(--gold);color:#fff;}
  @media(max-width:640px){.nav-actions .link{display:none;}}

  header{position:relative;z-index:1;text-align:center;padding:96px 0 30px;}
  .pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 16px;
    border-radius:999px;
    background:var(--gold-soft);
    border:1px solid rgba(201,168,76,.3);
    color:var(--text); 
    /* var(--gold-2); */
    font-size:16px;
    font-weight:800;
    margin-bottom:28px;}
  .pill .dot{width:7px;height:7px;border-radius:50%;background:var(--vermilion);box-shadow:0 0 8px var(--vermilion);}
  h1{font-size:clamp(40px,6.2vw,66px);font-weight:700;line-height:1.08;letter-spacing:-1.2px;margin-bottom:24px;}
  


  h1 .accent{
    background:linear-gradient(120deg,var(--gold-3),var(--gold-4) 100%,#f0dfa0);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:var(--gold);
  }
  .sub{
  font-size:clamp(16px,2.2vw,20px);
  color:var(--muted);
  max-width:600px;
  margin:0 auto 36px;
}

.cta-row{
  display:flex;
  gap:32px;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:60px;
}

.badge{
  display:block;
  padding:0;
  background:none;
  border:none;
  transition:transform .2s;
}

.badge:hover{
  transform:translateY(-2px);
}

.badge img{
  height:52px;
  width:auto;
  display:block;
}

.badge--web{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  padding:8px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 12px 30px rgba(0,0,0,.08);
}

.badge--web img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.badge.soon{
  opacity:1.0;
}

.badge--store{
  appearance:none;
  cursor:pointer;
  font:inherit;
}

.badge--store:focus-visible,
.store-launch-close:focus-visible,
.store-launch-web:focus-visible{
  outline:3px solid rgba(122,154,62,.42);
  outline-offset:4px;
}

body.store-dialog-open{
  overflow:hidden;
}

.store-launch-overlay{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(31,36,26,.48);
  backdrop-filter:blur(8px);
  opacity:0;
  transition:opacity .18s ease;
}

.store-launch-overlay[hidden]{
  display:none;
}

.store-launch-overlay.is-open{
  opacity:1;
}

.store-launch-dialog{
  position:relative;
  width:min(100%,520px);
  padding:36px;
  overflow:hidden;
  text-align:left;
  background:linear-gradient(145deg,#fff 0%,#f7f8f1 100%);
  border:1px solid rgba(122,154,62,.3);
  border-radius:26px;
  box-shadow:0 28px 80px rgba(31,36,26,.25);
  transform:translateY(12px) scale(.98);
  transition:transform .18s ease;
}

.store-launch-overlay.is-open .store-launch-dialog{
  transform:translateY(0) scale(1);
}

.store-launch-dialog::before{
  content:"";
  position:absolute;
  width:220px;
  height:220px;
  top:-120px;
  right:-70px;
  border-radius:50%;
  background:rgba(201,168,76,.12);
  pointer-events:none;
}

.store-launch-close{
  position:absolute;
  top:16px;
  right:16px;
  z-index:1;
  width:36px;
  height:36px;
  border:1px solid var(--border);
  border-radius:50%;
  background:#fff;
  color:var(--muted);
  font:inherit;
  font-size:24px;
  line-height:1;
  cursor:pointer;
}

.store-launch-visuals{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  min-height:68px;
  margin-bottom:22px;
}

.store-launch-icon,
.store-launch-platform{
  width:68px;
  height:68px;
  flex:0 0 68px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:19px;
}

.store-launch-icon{
  flex-direction:column;
  color:#fff;
  background:linear-gradient(145deg,var(--gold),#617d2f);
  box-shadow:0 12px 24px rgba(122,154,62,.22);
}

.store-launch-platform{
  position:absolute;
  left:50%;
  top:0;
  transform:translateX(-50%);
  background:#fff;
  border:1px solid var(--border);
  box-shadow:0 12px 24px rgba(31,36,26,.1);
}

.store-launch-platform img{
  display:block;
  width:42px;
  height:42px;
  object-fit:contain;
}

.store-launch-icon__mark{
  font-size:25px;
  font-weight:800;
  line-height:1;
}

.store-launch-icon__month{
  margin-top:3px;
  font-size:10px;
  font-weight:800;
  letter-spacing:1.5px;
}

.store-launch-kicker{
  margin-bottom:7px;
  color:var(--gold);
  font-size:12px;
  font-weight:800;
  letter-spacing:1.2px;
}

.store-launch-copy h2{
  margin:0 42px 12px 0;
  font-size:clamp(24px,4vw,32px);
  line-height:1.25;
  letter-spacing:-.4px;
}

.store-launch-copy > p:last-child{
  margin:0;
  color:var(--muted);
  font-size:15px;
  line-height:1.75;
}

.store-launch-dialog [data-platform-copy]{
  display:none;
}

.store-launch-dialog[data-platform="ios"] [data-platform-copy="ios"],
.store-launch-dialog[data-platform="android"] [data-platform-copy="android"]{
  display:inline;
}

.store-launch-dialog[data-platform="ios"] .store-launch-platform[data-platform-copy="ios"],
.store-launch-dialog[data-platform="android"] .store-launch-platform[data-platform-copy="android"]{
  display:flex;
}

.store-launch-web{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  margin-top:26px;
  padding:14px 20px;
  border-radius:14px;
  color:#fff;
  background:#0c0f15;
  font-size:15px;
  font-weight:800;
  transition:transform .18s ease,background .18s ease;
}

.store-launch-web:hover{
  transform:translateY(-1px);
  background:#1f241a;
}

@media(max-width:560px){
  .store-launch-overlay{
    align-items:end;
    padding:12px;
  }

  .store-launch-dialog{
    padding:30px 24px 24px;
    border-radius:24px;
  }

  .store-launch-icon,
  .store-launch-platform{
    width:60px;
    height:60px;
    flex-basis:60px;
    border-radius:17px;
  }

  .store-launch-visuals{
    min-height:60px;
    margin-bottom:18px;
  }

  .store-launch-platform img{
    width:38px;
    height:38px;
  }
}

@media(prefers-reduced-motion:reduce){
  .store-launch-overlay,
  .store-launch-dialog,
  .store-launch-web{
    transition:none;
  }
}

  /* .hero-visual{
  width:100%;
  max-width:none;
  overflow:hidden;
} */

.hero-visual{
  width:100vw;
  margin-left:calc(50% - 50vw);
  /* Soft gold spotlight so the screenshots feel lit / premium. */
  background:radial-gradient(ellipse 55% 75% at 50% 32%, rgba(201,168,76,.10), transparent 70%);
}

.app-screens{
  display:flex;
  gap:18px;
  overflow-x:auto;
  touch-action:auto;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  padding:12px max(24px, calc((100vw - 260px) / 2)) 24px;
  scroll-padding-inline:max(0px, calc((100vw - 260px) / 2));
}

.app-screens::-webkit-scrollbar{
  display:none;
}

/* .app-screens img{
  flex:0 0 auto;
  width:240px;
  height:auto;
  border-radius:24px;
  scroll-snap-align:center;
  box-shadow:0 20px 50px rgba(0,0,0,.25);
  border:1px solid var(--border);
} */

.app-screens img{
  flex:0 0 260px;        /* same width for every screenshot */
  width:260px;
  height:560px;          /* same height box */
  object-fit:cover;      /* fills box consistently */
  border-radius:28px;
  scroll-snap-align:center;
  /* Deeper, warmer shadow + a faint gold rim = premium device feel. */
  box-shadow:0 30px 70px rgba(0,0,0,.5), 0 0 0 1px rgba(201,168,76,.18);
  border:1px solid rgba(255,255,255,.06);
  transition:transform .35s ease, box-shadow .35s ease;
}
.app-screens img:hover{
  transform:translateY(-8px) scale(1.02);
  box-shadow:0 44px 100px rgba(0,0,0,.6), 0 0 0 1px rgba(201,168,76,.4);
}

.screen-frame{
  flex:0 0 260px;
  width:260px;
  height:560px;
  overflow-y:auto;
  overflow-x:hidden;
  border-radius:24px;
  scroll-snap-align:center;
  box-shadow:0 20px 50px rgba(0,0,0,.25);
  border:1px solid var(--border);
  background:#000;
  touch-action:pan-x pan-y;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;

  scrollbar-width:none;
}

.screen-frame::-webkit-scrollbar{
  display:none;
}


.screen-frame img{
  display:block;
  width:100%;
  height:auto;
  border-radius:24px;
  pointer-events:none;
  -webkit-user-drag:none;
  user-select:none;
}
  
  .mock-title{font-weight:800;font-size:21px;margin-bottom:3px;}
  .mock-title span{color:var(--gold);}
  .mock-sub{color:var(--muted);font-size:12px;margin-bottom:18px;}
  .mock-card{background:var(--surface-2);border:1px solid var(--border);border-radius:14px;padding:16px;margin-bottom:12px;}
  .mock-amount{font-family:'Source Serif 4',serif;font-size:30px;font-weight:700;}
  .mock-amount span{color:var(--gold);}
  .mock-bar{height:8px;border-radius:6px;background:var(--border);margin-top:12px;overflow:hidden;}
  .mock-bar>div{height:100%;width:62%;background:linear-gradient(90deg,var(--gold),var(--gold-2));}
  .mock-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--border);font-size:13px;}
  .mock-row:last-child{border-bottom:0;}
  .mock-row .lbl{display:flex;align-items:center;gap:10px;color:#3a4230;}
  .mock-row .swatch{width:10px;height:10px;border-radius:3px;}

  section{position:relative;z-index:1;padding:45px 0;scroll-margin-top:10px;}
  .eyebrow{color:var(--gold);font-weight:700;font-size:12.5px;letter-spacing:1.5px;text-transform:uppercase;text-align:center;margin-bottom:10px;}
  h2{font-size:clamp(28px,4vw,42px);font-weight:700;text-align:center;letter-spacing:-.6px;margin-bottom:30px;}

  .features{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:22px;
}

.feature{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.025),
      transparent
    ),
    var(--surface);
  border:1px solid var(--border);
  border-radius:22px;
  padding:32px 30px;
  transition:.25s ease;
  position:relative;
  overflow:hidden;
}

.feature:hover{
  transform:translateY(-6px);
  border-color:rgba(201,168,76,.45);
  box-shadow:0 18px 50px rgba(0,0,0,.18);
}


.feature .ico{
  width:52px;
  height:52px;
  border-radius:15px;
  background:var(--gold-soft);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:20px;
}


.feature .ico svg{
  width:25px;
  height:25px;
  stroke:var(--gold);
  fill:none;
  stroke-width:1.7;
}


.feature h3{
  font-size:18px;
  font-weight:700;
  margin-bottom:10px;
  letter-spacing:.2px;
}


.feature p{
  color:var(--muted);
  font-size:14.5px;
  line-height:1.7;
}


/* Full width video showcase */
.video-showcase{
  width:100%;
}

.video-showcase-inner{
  width:100vw;
  margin-left:calc(50% - 50vw);
  padding:0;
}

.video-grid{
  display:grid;
  gap:24px;
}

.video-row{
  display:flex;
  gap:24px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  padding:6px max(24px, calc((100vw - 340px) / 2)) 10px;
  scroll-padding-inline:max(24px, calc((100vw - 340px) / 2));
}

.video-row::-webkit-scrollbar{
  display:none;
}

.video-card{
  flex:0 0 min(340px, calc(100vw - 72px));
  width:min(340px, calc(100vw - 72px));
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:24px;
  padding:10px;
  overflow:hidden;
  box-shadow:0 25px 70px rgba(0,0,0,.25);
  scroll-snap-align:center;
}

.video-frame{
  position:relative;
  overflow:hidden;
  border-radius:16px;
  background:#000;
  transform:translateZ(0);
  -webkit-mask-image:-webkit-radial-gradient(white, black);
}

.video-card video{
  width:100%;
  aspect-ratio:16 / 9;
  display:block;
  background:#000;
  border-radius:16px;
  object-fit:cover;
}

@media(max-width:900px){
  .video-showcase-inner{
    width:100vw;
    margin-left:calc(50% - 50vw);
    padding:0;
  }
}

  .steps-wrap{position:relative;border-radius:24px;overflow:hidden;background:var(--surface);border:1px solid var(--border);padding:54px 30px;}
  .steps{position:relative;z-index:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:28px;}
  .step{text-align:center;}
  .step .n{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--gold);color:var(--gold);font-weight:800;font-size:18px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;}
  .step h3{font-size:17px;margin-bottom:6px;}
  .step p{color:var(--muted);font-size:14px;}

  .trust{
  position:relative;
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:24px;
  padding:48px 40px;
  text-align:center;
}
  .trust h2{margin-bottom:8px;}
  .trust .lead{color:var(--muted);position:relative;z-index:1;}
  .trust .row{position:relative;z-index:1;display:flex;gap:34px;justify-content:center;flex-wrap:wrap;margin-top:28px;}
  .trust .item{display:flex;align-items:center;gap:10px;font-weight:600;font-size:14.5px;}
  .trust .item svg{width:20px;height:20px;stroke:var(--gold);fill:none;stroke-width:1.8;}

  .final{text-align:center;}
  .final h2{margin-bottom:14px;}
  .final p{color:var(--muted);margin-bottom:28px;}

  footer{border-top:1px solid var(--border);background:linear-gradient(180deg,transparent,rgba(201,168,76,.025));padding:64px 0 32px;position:relative;z-index:1;}
  .foot-top{
  display:flex;
  flex-direction:column;
  gap:42px;
  padding-bottom:36px;
  border-bottom:1px solid var(--border);
}

.foot-row{
  display:grid;
  gap:44px;
}


.foot-row:first-child{
  grid-template-columns:repeat(4,1fr);
}


.foot-row.second{
  grid-template-columns:1fr;
  justify-items:center;
  align-items:center;
  text-align:center;
}

.centered{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.centered .brand{
  flex-direction:column;
  gap:14px;
}


.centered .brand img{
  width:96px;
  height:96px;
}

.centered .brand-name{
  font-size:34px;
}

.centered .socials{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  margin-top:24px;
}

@media(max-width:820px){

  .foot-row:first-child,
  .foot-row.second{
    grid-template-columns:1fr;
    text-align:center;
  }

  .foot-col{
    text-align:center;
  }

  .socials{
    justify-content:center;
  }
}  
.foot-brand .brand{
  margin-bottom:2px;
}

.foot-brand p{
  color:var(--muted);
  font-size:14px;
  line-height:1.5;
  max-width:290px;
  margin-bottom:10px;
}
.foot-brand{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
  .foot-col h4{font-size:11.5px;letter-spacing:1px;text-transform:uppercase;color:var(--gold);margin-bottom:16px;font-weight:700;}
  .foot-col a{display:block;color:#5C6551;font-size:14px;margin-bottom:11px;transition:color .15s;}
  .foot-col a:hover{color:var(--gold);}
  .socials{display:flex;gap:10px;flex-wrap:wrap;}
  .socials a{width:40px;height:40px;border-radius:11px;background:#0c0f15;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;transition:.2s;overflow:hidden;}
  .socials a:hover{border-color:var(--gold);background:var(--gold-soft);transform:translateY(-2px);}
  .socials img{width:20px;height:20px;object-fit:contain;display:block;}
  .foot-bottom{padding-top:26px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;color:var(--muted);font-size:13px;}
  .foot-bottom .fb-links{display:flex;gap:22px;}
  .foot-bottom .fb-links a:hover{color:var(--gold);}

  [data-en]{
    display:none !important;
  }

  html[lang="en"] [data-jp]{
    display:none !important;
  }

  html[lang="en"] a[data-en]{
    display:block !important;
  }

  html[lang="en"] span[data-en]{
    display:inline !important;
  }

  html[lang="en"] div[data-en],
  html[lang="en"] h1[data-en],
  html[lang="en"] h2[data-en],
  html[lang="en"] h3[data-en],
  html[lang="en"] h4[data-en],
  html[lang="en"] p[data-en]{
    display:block !important;
  }

  /* Subtle scroll-reveal — gentle fade-up as sections enter. Disabled for
     users who prefer reduced motion. */
  .reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease;}
  .reveal.in{opacity:1;transform:none;}
  @media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important;transition:none;}}


.sakura-bg{
  position:fixed;
  right:0;
  bottom:0;
  width:600px;
  height:520px;
  z-index:0;
  pointer-events:none;
  opacity:.4;
  filter:blur(2px);
  overflow:hidden;
}

.sakura-bg svg{
  width:600px;
  height:520px;
  display:block;
}
.background-decor{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}

.pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;max-width:860px;margin:0 auto;align-items:stretch;}
  .plan{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:22px;padding:32px 30px;position:relative;transition:transform .25s ease,box-shadow .25s ease;}
  .plan:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(31,36,26,.08);}
  /* Premium: gold-washed, elevated, with a gradient top accent bar. */
  .plan.pro{border-color:rgba(201,168,76,.55);background:linear-gradient(180deg,rgba(228,201,121,.10),var(--surface) 42%);box-shadow:0 24px 64px rgba(201,168,76,.14);}
  /* Centered "POPULAR" pill straddling the top edge of the Premium card. The
     card must NOT clip overflow, or the pill's top half gets cut off. */
  .plan .tag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);z-index:2;white-space:nowrap;background:linear-gradient(90deg,var(--gold-3),var(--gold-4));color:#fff;font-size:12px;font-weight:800;padding:6px 18px;border-radius:999px;letter-spacing:.6px;text-transform:uppercase;box-shadow:0 6px 16px rgba(201,168,76,.35);}
  .plan-head{margin-bottom:18px;}
  .plan h3{font-size:14px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin:0 0 6px;}
  .plan.pro h3{color:var(--gold-3);}
  .plan-tagline{margin:0;font-size:13.5px;line-height:1.45;color:var(--muted);}
  .price-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 12px;padding-bottom:20px;border-bottom:1px solid var(--border);}
  .plan .price{font-family:'Source Serif 4',serif;font-size:42px;font-weight:700;line-height:1;color:var(--text);}
  .plan .price small{font-size:15px;color:var(--muted);font-weight:400;font-family:'Inter',sans-serif;}
  .plan .yr{color:var(--muted);font-size:13.5px;}
  .save-badge{display:inline-flex;align-items:center;background:var(--gold-soft);border:1px solid rgba(201,168,76,.4);color:var(--gold-3);font-size:12px;font-weight:800;padding:5px 11px;border-radius:999px;}
  .plus-line{margin:18px 0 0;font-size:12.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--gold-3);}
  .plan ul{list-style:none;margin:14px 0 0;padding:0;}
  .plan>ul{flex:1 1 auto;}
  .plan li{display:flex;gap:11px;align-items:flex-start;font-size:15px;line-height:1.4;color:#3a4230;padding:10px 0;}
  .plan li+li{border-top:1px solid var(--border);}
  .plan li svg{width:19px;height:19px;flex:0 0 auto;margin-top:1px;}
  .plan li.on svg{stroke:var(--gold);}
  .plan li.off{color:var(--muted);}
  .plan li.off svg{stroke:#c0533f;}
  .plan-cta{display:flex;align-items:center;justify-content:center;margin-top:24px;padding:14px 18px;border-radius:14px;font-size:15px;font-weight:800;letter-spacing:.2px;text-decoration:none;transition:transform .15s ease,box-shadow .2s ease,background .2s ease;}
  .plan-cta--ghost{background:transparent;color:var(--gold);border:1.5px solid var(--gold);}
  .plan-cta--ghost:hover{background:var(--gold-soft);}
  .plan-cta--gold{background:linear-gradient(135deg,var(--gold),#617d2f);color:#fff;box-shadow:0 10px 26px rgba(122,154,62,.32);}
  .plan-cta--gold:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(122,154,62,.42);}
  .plan .note{margin-top:16px;font-size:12px;color:var(--muted);text-align:center;line-height:1.5;}
  .proc-explain{max-width:820px;margin:36px auto 0;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:30px;}
  .proc-explain h3{font-size:16px;font-weight:700;margin-bottom:6px;text-align:center;}
  .proc-explain .lead{font-size:13.5px;color:var(--muted);text-align:center;margin-bottom:20px;}
  .proc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;}
  .proc-card{background:var(--surface-2);border:1px solid var(--border);border-radius:14px;padding:18px 18px;}
  .proc-card b{color:var(--gold-2);font-size:14px;display:block;margin-bottom:7px;}
  .proc-card p{font-size:13px;color:#3a4230;line-height:1.62;}

  .proc-list{
  list-style:none;
  padding:0;
  margin:0;
}

.proc-list li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  color:#3a4230;
  font-size:13.5px;
  line-height:1.6;
  padding:8px 0;
}

.proc-list li:first-letter{
  color:var(--gold);
  font-weight:700;
}

.proc-list li.muted{
  color:var(--muted);
}


.premium-card{
  border-color:rgba(122,154,62,.35);
  background:
    linear-gradient(
      180deg,
      rgba(122,154,62,.12),
      transparent
    ),
    var(--surface-2);
}


@media (max-width: 900px){
  nav .wrap{
    padding: 0 18px;
    gap: 12px;
    height: auto;
    min-height: 66px;
  }

  .nav-actions{
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  header{
    padding: 76px 0 22px;
  }

  .hero-title,
  .hero-visual{
    width: auto;
    margin-left: 0;
  }

  .cta-row{
    gap: 16px;
    margin-bottom: 42px;
  }

  .app-screens{
    gap: 14px;
    padding: 10px 18px 22px;
    scroll-padding-inline: 18px;
  }

  .screen-frame,
  .app-screens img{
    flex-basis: 220px;
    width: 220px;
    height: 474px;
  }

  .steps-wrap,
  .trust,
  .proc-explain,
  .plan{
    padding-left: 22px;
    padding-right: 22px;
  }

  .foot-row:first-child{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
  }
}

@media (max-width: 640px){
  .wrap{
    padding: 0 16px;
  }

  nav .wrap{
    align-items: flex-start;
    padding: 10px 16px;
  }

  .brand{
    font-size: 16px;
    padding: 7px 12px;
    border-radius: 12px;
  }

  .brand img{
    width: 26px;
    height: 26px;
  }

  .nav-actions{
    gap: 8px;
  }

  .lang-toggle button{
    padding: 6px 10px;
  }

  header{
    padding: 62px 0 18px;
  }

  .pill{
    font-size: 11px;
    padding: 6px 12px;
    margin-bottom: 18px;
  }

  h1{
    font-size: clamp(31px, 9.5vw, 42px);
    line-height: 1.12;
    letter-spacing: -.8px;
    margin-bottom: 18px;
  }

  .sub{
    font-size: 15px;
    margin-bottom: 28px;
  }

  .cta-row{
    gap: 12px;
    margin-bottom: 32px;
  }

  .badge img{
    height: 46px;
  }

  .badge--web{
    width: 46px;
    height: 46px;
    padding: 7px;
    border-radius: 12px;
  }

  .app-screens{
    gap: 12px;
    padding: 8px 16px 20px;
    scroll-padding-inline: 16px;
  }

  .screen-frame,
  .app-screens img{
    flex-basis: 184px;
    width: 184px;
    height: 398px;
    border-radius: 20px;
  }

  .screen-frame,
  .screen-frame img{
    border-radius: 20px;
  }

  section{
    padding: 34px 0;
  }

  h2{
    font-size: 26px;
    margin-bottom: 22px;
  }

  .feature{
    padding: 24px 20px;
  }

  .video-showcase-inner{
    padding: 0 16px;
  }

  .video-grid,
  .video-row{
    gap: 16px;
  }

  .steps-wrap,
  .trust,
  .proc-explain,
  .plan{
    padding: 22px 18px;
  }

  .steps{
    gap: 22px;
  }

  .trust .row{
    gap: 18px;
    margin-top: 20px;
  }

  .pricing{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .plan .price{
    font-size: 34px;
  }

  .proc-grid{
    grid-template-columns: 1fr;
  }

  footer{
    padding: 48px 0 26px;
  }

  .foot-top{
    gap: 28px;
    padding-bottom: 28px;
  }

  .foot-row:first-child,
  .foot-row.second{
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .centered .brand img{
    width: 72px;
    height: 72px;
  }

  .centered .brand-name{
    font-size: 28px;
  }

  .foot-bottom{
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }

  .foot-bottom .fb-links{
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (max-width: 420px){
  nav .wrap{
    gap: 10px;
  }

  .nav-actions{
    width: 100%;
    justify-content: space-between;
  }

  .brand{
    font-size: 15px;
  }

  .lang-toggle{
    font-size: 12px;
  }

  .page-menu,
  .lang-toggle{
    transform: scale(.96);
    transform-origin: right center;
  }

  .screen-frame,
  .app-screens img{
    flex-basis: 170px;
    width: 170px;
    height: 368px;
  }
}


@media (max-width: 640px){
  nav .wrap{
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    height: auto;
    min-height: 0;
    padding: 10px 16px 12px;
  }

  nav .brand{
    align-self: flex-start;
  }

  .nav-actions{
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }

  .page-menu,
  .lang-toggle{
    flex: 0 0 auto;
  }

  .cta-row{
    gap: 10px;
    justify-content: center;
    align-items: center;
  }

  .cta-row > *{
    flex: 0 1 auto;
  }

  .badge img{
    height: 42px;
    width: auto;
    max-width: 132px;
  }

  .badge--web{
    width: 42px;
    height: 42px;
    padding: 6px;
  }

  .badge--web img{
    width: 100%;
    height: 100%;
    max-width: none;
  }
}

@media (max-width: 420px){
  nav .wrap{
    padding: 10px 12px 12px;
  }

  .nav-actions{
    gap: 6px;
  }

  .page-menu__primary{
    max-width: 88px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .lang-toggle button{
    padding: 6px 8px;
  }

  .cta-row{
    gap: 8px;
  }

  .badge img{
    height: 38px;
    max-width: 118px;
  }

  .badge--web{
    width: 38px;
    height: 38px;
    padding: 5px;
  }
}

@media (max-width: 768px){
  nav .wrap{
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    height: auto;
    min-height: 0;
    padding: 10px 16px 12px;
    gap: 10px;
  }

  .brand{
    align-self: flex-start;
    font-size: 16px;
    padding: 7px 12px;
    border-radius: 12px;
  }

  .brand img{
    width: 26px;
    height: 26px;
  }

  .nav-actions{
    width: 100%;
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px 10px;
  }

  .nav-actions .link{
    display: inline-flex !important;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(255,255,255,.56);
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
  }

  .page-menu{
    min-width: 0;
    max-width: 100%;
  }

  .page-menu__primary{
    display: inline-flex;
    align-items: center;
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
  }

  .lang-toggle{
    margin-left: auto;
    font-size: 12px;
  }

  .lang-toggle button{
    padding: 6px 10px;
  }
}

@media (max-width: 420px){
  nav .wrap{
    padding: 10px 12px 12px;
    gap: 8px;
  }

  .brand{
    font-size: 15px;
  }

  .nav-actions{
    gap: 8px;
  }

  .nav-actions .link{
    min-height: 32px;
    padding: 0 10px;
    font-size: 11.5px;
  }

  .page-menu{
    max-width: calc(100vw - 120px);
  }

  .page-menu__primary{
    max-width: 100%;
  }

  .lang-toggle button{
    padding: 6px 8px;
  }
}

@media (max-width: 480px){
  html[lang="ja"] .hero-title{
    font-size:clamp(27px, 8.7vw, 34px);
  }

  html[lang="ja"] .hero-line-no-break{
    white-space:nowrap;
  }
}

/* Keep the complete tall screenshot inside each fixed-height phone window.
   The frame scrolls vertically; the image itself must retain its natural height. */
.screen-frame > img,
.app-screens .screen-frame > img{
  display:block;
  width:100%;
  height:auto !important;
  min-height:0;
  max-width:none;
  object-fit:contain;
  object-position:top center;
  transform:none;
}

.app-screens .screen-frame > img:hover{
  transform:none;
}

/* The web badge follows the same sizing system as the App Store and Play badges. */
.badge--web{
  display:block;
  width:auto;
  height:auto;
  padding:0;
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
}

.badge--web img{
  width:auto;
  height:52px;
  max-width:none;
  object-fit:contain;
}

@media (max-width: 640px){
  .cta-row{
    flex-wrap:nowrap;
    gap:clamp(4px, 2vw, 10px);
  }

  .cta-row .badge img,
  .cta-row .badge--web img{
    width:auto;
    height:clamp(28px, 9.5vw, 42px);
    max-width:none;
  }

  .cta-row .badge--web{
    width:auto;
    height:auto;
    padding:0;
  }
}