/* LINE hand-off pages (/l/<code> outside LINE, /liff/ inside LINE). Mobile first. */
.line-bridge{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px 16px;background:linear-gradient(180deg,#eef3ef 0,var(--paper) 55%)}
.bridge-card{width:100%;max-width:440px;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 18px 50px #183d4314}
.bridge-photo{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:50% 38%}
.bridge-body{padding:26px 24px 28px}
.bridge-body .brand-lockup{margin-bottom:22px}
.bridge-body .brand-lockup .brand-lettering{font-size:28px}
.bridge-body h1{font-size:1.65rem;line-height:1.35;margin:0 0 .6rem;white-space:normal}
.bridge-lead{color:var(--muted);font-size:.95rem;line-height:1.75;margin-bottom:1.3rem}
.bridge-steps{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;gap:.6rem;counter-reset:step}
.bridge-steps li{counter-increment:step;display:flex;align-items:center;gap:.75rem;font-size:.92rem;line-height:1.5}
.bridge-steps li::before{content:counter(step);flex:0 0 28px;height:28px;border-radius:50%;background:var(--mint);color:var(--ink);display:grid;place-items:center;font-size:.8rem;font-weight:700}
.bridge-cta{display:flex;width:100%;align-items:center;justify-content:center;gap:.7rem;min-height:54px;padding:.9rem 1.2rem;border-radius:12px;background:#057a37;border:0;color:#fff;font-size:1.05rem;font-weight:700;text-decoration:none;letter-spacing:.02em}
.bridge-cta:hover{background:#046a30;text-decoration:none}
.bridge-cta svg{width:26px;height:26px;flex:0 0 26px}
.bridge-note{margin:1rem 0 0;font-size:.78rem;line-height:1.7;color:var(--muted);text-align:center}
.bridge-note a{text-decoration:underline;text-underline-offset:3px}
.bridge-fallback{display:block;margin-top:1.1rem;text-align:center;font-size:.85rem;color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.bridge-desktop{display:none}
/* Computers cannot open LIFF; offer the phone route instead of a button that goes nowhere. */
@media (hover:hover) and (pointer:fine) and (min-width:900px){
  .bridge-mobile-only{display:none}
  .bridge-desktop{display:flex;gap:18px;align-items:center;padding:16px;border:1px solid var(--line);border-radius:12px;background:#fafcf9;margin-bottom:1rem}
  .bridge-desktop img{width:112px;height:112px;object-fit:contain;background:#fff;padding:6px;flex:0 0 112px}
  .bridge-desktop p{margin:0;font-size:.88rem;line-height:1.7}
}
/* LIFF progress state */
.bridge-progress{display:flex;align-items:center;gap:.8rem;margin:1.2rem 0 0;font-size:.95rem}
.bridge-spinner{width:22px;height:22px;flex:0 0 22px;border-radius:50%;border:3px solid var(--mint);border-top-color:#057a37;animation:bridge-spin .9s linear infinite}
.bridge-retry{display:none;margin-top:1.4rem}
/* Without JavaScript the retry link still appears after a pause. */
.bridge-retry.delayed{display:block;animation:bridge-reveal 0s linear 8s both}
.liff-failed .bridge-spinner{display:none}
.liff-failed .bridge-retry{display:block;animation:none}
.liff-failed #liff-status{color:#a32b25}
@keyframes bridge-spin{to{transform:rotate(360deg)}}
@keyframes bridge-reveal{from{visibility:hidden}to{visibility:visible}}
@media (prefers-reduced-motion:reduce){.bridge-spinner{animation:none;border-top-color:var(--mint)}}
@media (max-width:380px){.bridge-body{padding:22px 18px 24px}.bridge-body h1{font-size:1.45rem}}