/*
Theme Name: Go-Fi
Description: A lightweight landing page theme for Go-Fi.
Version: 1.0.0
Text Domain: go-fi
*/
:root {
      color-scheme: light;
      --ink: #171b22;
      --muted: #626b78;
      --blue: #167bc1;
      --blue-dark: #0c609c;
      --sky: #e9f5fb;
      --cream: #f8f5ee;
      --yellow: #ffe45c;
      --line: rgba(23, 27, 34, .12);
      --shadow: 0 18px 44px rgba(22, 54, 77, .10);
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      background: var(--cream);
      color: var(--ink);
      font-family: "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
      -webkit-font-smoothing: antialiased;
      line-height: 1.75;
    }
    a { color: inherit; }
    .page { width: min(100%, 500px); margin: 0 auto; overflow: hidden; background: #fff; box-shadow: 0 0 60px rgba(24, 42, 58, .06); }
    .header { height: 66px; padding: 0 22px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); }
    .brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; font-size: 23px; font-weight: 900; letter-spacing: -.04em; }
    .brand-mark { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; background: var(--blue); color: #fff; font-size: 16px; transform: rotate(-5deg); }
    .header-note { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; }
    .hero { position: relative; padding: 38px 24px 30px; background: radial-gradient(ellipse at 82% 16%, #fff 0, rgba(255,255,255,0) 43%), linear-gradient(180deg, #fbf9f3 0%, #fff 100%); }
    .eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px 6px 7px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: #37404b; font-size: 11px; font-weight: 700; }
    .eyebrow b { padding: 2px 8px; border-radius: 999px; background: var(--yellow); color: var(--ink); font-size: 10px; }
    h1 { margin: 20px 0 13px; font-size: clamp(30px, 8vw, 38px); line-height: 1.45; letter-spacing: -.045em; font-weight: 900; }
    h1 em { font-style: normal; background: linear-gradient(transparent 66%, var(--yellow) 66%); }
    .hero-copy { margin: 0; color: #4e5864; font-size: 14px; line-height: 1.95; }
    .device-wrap { position: relative; display: grid; place-items: center; height: 245px; margin: 16px -10px 2px; overflow: hidden; }
    .device-halo { position: absolute; width: 222px; height: 222px; border: 1px solid rgba(22,123,193,.18); border-radius: 50%; box-shadow: 0 0 0 28px rgba(22,123,193,.035), 0 0 0 56px rgba(22,123,193,.025); }
    .device-photo { position: relative; z-index: 1; display: block; width: 144px; height: 220px; object-fit: cover; object-position: center; border-radius: 12px; box-shadow: 0 14px 32px rgba(16, 31, 43, .15); }
    .hero-points { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 15px 0; text-align: center; }
    .hero-point + .hero-point { border-left: 1px solid var(--line); }
    .hero-point strong { display: block; font-size: 12px; }
    .hero-point span { display: block; color: var(--muted); font-size: 10px; }
    .section { padding: 34px 20px; }
    .section-kicker { margin: 0 0 4px; color: var(--blue); font-size: 10px; font-weight: 900; letter-spacing: .18em; text-align: center; }
    h2 { margin: 0 0 9px; font-size: 24px; line-height: 1.45; letter-spacing: -.035em; text-align: center; }
    .section-intro { margin: 0 auto 22px; color: var(--muted); font-size: 12px; text-align: center; }
    .pricing { background: #f5faff; }
    .price-card { position: relative; margin-top: 14px; padding: 20px 18px 17px; border: 1px solid rgba(22,123,193,.18); border-radius: 18px; background: #fff; box-shadow: 0 8px 22px rgba(22,54,77,.06); }
    .plan-name { margin: 0 0 10px; font-size: 15px; font-weight: 800; }
    .regular { display: flex; align-items: baseline; gap: 4px; color: var(--muted); font-size: 12px; }
    .regular strong { color: #424b57; font-size: 20px; font-weight: 700; letter-spacing: -.03em; }
    .effective-label { display: flex; align-items: center; gap: 7px; margin-top: 10px; color: var(--blue-dark); font-size: 11px; font-weight: 800; }
    .effective-label::after { content: ""; height: 1px; flex: 1; background: rgba(22,123,193,.2); }
    .effective { display: flex; align-items: baseline; gap: 3px; color: var(--blue-dark); font-weight: 900; line-height: 1.1; }
    .effective strong { font-size: 42px; letter-spacing: -.055em; }
    .effective span { font-size: 16px; }
    .cashback { margin: 9px 0 13px; padding: 9px 11px; border-radius: 10px; background: #fff9d9; color: #514816; font-size: 11px; font-weight: 700; text-align: center; }
    .cashback b { font-size: 14px; }
    .price-card-featured { margin-top: 22px; padding: 24px 18px 19px; border: 3px solid transparent; border-radius: 20px; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(130deg, #087bc1 0%, #24b9dc 58%, #ffd94d 100%) border-box; box-shadow: 0 16px 34px rgba(14, 113, 169, .18); }
    .featured-badge { position: absolute; top: -14px; left: 16px; padding: 5px 13px; border-radius: 999px; background: linear-gradient(100deg, #ffe45c, #ffbd42); color: #342a0c; font-size: 11px; font-weight: 900; box-shadow: 0 4px 10px rgba(190, 139, 0, .2); }
    .plan-eyebrow { margin: 0 0 2px; color: var(--blue-dark); font-size: 10px; font-weight: 900; letter-spacing: .08em; }
    .price-card-featured .plan-name { margin-bottom: 11px; font-size: 18px; }
    .price-card-featured .effective { color: #075f9e; }
    .price-card-featured .effective strong { font-size: 48px; }
    .cashback-featured { border: 1px solid #ffd86a; background: linear-gradient(100deg, #fff5bd, #fffaf0); }
    .monthly-saving { margin: -7px 0 13px; color: #69727e; font-size: 10px; text-align: center; }
    .price-card-featured .plan-link { min-height: 54px; border: 0; background: linear-gradient(100deg, #0878ba, #13a7d0); color: #fff; box-shadow: 0 7px 16px rgba(8, 120, 186, .23); font-size: 14px; }
    .price-card-standard { margin-top: 16px; border-color: rgba(23, 27, 34, .14); box-shadow: 0 5px 15px rgba(22, 54, 77, .04); }
    .regular-standard strong { color: var(--ink); font-size: 28px; }
    .standard-note { margin: 8px 0 13px; color: var(--muted); font-size: 11px; }
    .price-card-standard .plan-link { min-height: 46px; border-color: rgba(23, 27, 34, .2); color: #3f4b58; background: #fff; }
    .plan-link { display: flex; min-height: 46px; align-items: center; justify-content: center; gap: 7px; border: 1px solid rgba(22,123,193,.35); border-radius: 10px; color: var(--blue-dark); text-decoration: none; font-size: 13px; font-weight: 800; }
    .price-note { margin: 14px 0 0; color: #69727e; font-size: 10px; line-height: 1.8; }
    .benefits { background: #fff; }
    .benefit-list { display: grid; gap: 10px; margin-top: 20px; }
    .benefit { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
    .benefit-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--sky); color: var(--blue-dark); font-size: 18px; font-weight: 900; }
    .benefit h3 { margin: 0 0 2px; font-size: 13px; }
    .benefit p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
    .steps { background: #fbf9f3; }
    .step-list { display: grid; gap: 0; margin: 19px 0 0; padding: 0; list-style: none; }
    .step-list li { display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: start; padding: 10px 0; }
    .step-number { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 12px; font-weight: 900; }
    .step-list strong { display: block; font-size: 12px; }
    .step-list span:last-child { color: var(--muted); font-size: 11px; }
    .final { padding: 32px 20px 26px; background: var(--ink); color: #fff; text-align: center; }
    .final .section-kicker { color: var(--yellow); }
    .final h2 { margin-bottom: 8px; font-size: 23px; }
    .final-copy { margin: 0 0 18px; color: #d3dae1; font-size: 12px; }
    .cta { display: flex; width: 100%; min-height: 60px; align-items: center; justify-content: center; gap: 10px; border-radius: 12px; background: var(--yellow); color: #171b22; text-decoration: none; font-size: 16px; font-weight: 900; box-shadow: 0 8px 0 #d4b62c; }
    .cta:hover { background: #ffeb83; }
    .cta:focus-visible, .plan-link:focus-visible { outline: 3px solid #55b8f1; outline-offset: 3px; }
    .final-note { margin: 16px 0 0; color: #bdc6d0; font-size: 10px; }
    footer { padding: 16px 20px 22px; background: var(--ink); color: #9ea9b5; font-size: 9px; text-align: center; }
    @media (min-width: 501px) { body { padding: 24px 0; } .page { border-radius: 20px; } }
    @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }