/* ============================================================
   Sendora V2 — premium layout
   Fraunces display + Schibsted Grotesk + Zen Kaku Gothic New
   ============================================================ */

:root{
  --bg:#FAF9F6;
  --bg-deep:#F2F0EA;
  --surface:#FFFFFF;
  --ink:#1D1C19;
  --ink-soft:#57564F;
  --ink-faint:#8B8A80;
  --line:#E6E4DC;
  --line-strong:#D6D4CA;

  --indigo:#2C4C80;
  --indigo-deep:#1F3A66;
  --indigo-tint:#EDF1F7;
  --indigo-ghost:#F5F7FB;

  --ok:#2E7D5B;
  --ok-tint:#E9F4EF;
  --warn:#9A6B15;
  --warn-tint:#FBF2DF;

  --r-lg:22px;
  --r-md:14px;
  --shadow-float:0 24px 60px -12px rgba(29,28,25,.16);
  --shadow-soft:0 8px 28px rgba(29,28,25,.08);

  --display:'Fraunces','Zen Kaku Gothic New',serif;
  --body:'Schibsted Grotesk','Zen Kaku Gothic New',system-ui,-apple-system,'Hiragino Kaku Gothic ProN','Noto Sans JP',sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{font-family:var(--body);background:var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
:focus-visible{outline:2px solid var(--indigo);outline-offset:2px;border-radius:6px}

.wrap{max-width:1160px;margin:0 auto;padding:0 28px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 26px;border-radius:999px;font-weight:600;font-size:15.5px;
  transition:transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease;
  white-space:nowrap;
}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--ink);color:var(--bg)}
.btn-primary:hover{background:#000}
.btn-indigo{background:var(--indigo);color:#fff}
.btn-indigo:hover{background:var(--indigo-deep)}
.btn-ghost{border:1px solid var(--line-strong);background:transparent}
.btn-ghost:hover{border-color:var(--ink-faint)}
.btn-sm{padding:9px 18px;font-size:14px}
.btn[disabled]{opacity:.45;cursor:not-allowed}

.chip{
  display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;
  font-size:13px;font-weight:600;
}
.chip-ok{background:var(--ok-tint);color:var(--ok)}
.chip-ship{background:var(--indigo-tint);color:var(--indigo)}
.chip-warn{background:var(--warn-tint);color:var(--warn)}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}

/* ---------- topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:60;
  background:rgba(250,249,246,.9);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .25s;
}
.topbar.scrolled{border-bottom-color:var(--line)}
.topbar-inner{display:flex;align-items:center;gap:30px;height:74px}
.brand{display:flex;align-items:baseline;gap:9px;font-weight:700;font-size:21px;letter-spacing:-.02em}
.brand-mark{color:var(--indigo)}
.brand-note{font-size:11.5px;font-weight:500;color:var(--ink-faint)}
.topnav{display:flex;gap:26px;margin-left:auto;font-size:15px;color:var(--ink-soft)}
.topnav a:hover{color:var(--ink)}
.topbar-cta{display:flex;align-items:center;gap:14px}
.lang-toggle{display:flex;border:1px solid var(--line-strong);border-radius:999px;overflow:hidden;font-size:12.5px;font-weight:600}
.lang-toggle button{padding:6px 12px;color:var(--ink-faint)}
.lang-toggle button.active{background:var(--ink);color:var(--bg)}

/* ---------- hero ---------- */
.hero{padding:96px 0 90px;position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:-40% -20% auto auto;width:760px;height:760px;border-radius:50%;
  background:radial-gradient(closest-side,var(--indigo-ghost),transparent 70%);pointer-events:none;
}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:64px;align-items:center;position:relative}
.hero h1{
  font-family:var(--display);font-weight:560;font-variation-settings:"opsz" 72;
  font-size:clamp(42px,5.4vw,68px);line-height:1.04;letter-spacing:-.015em;
}
.hero h1 .accent{color:var(--indigo);font-style:italic}
.hero-sub{margin-top:24px;font-size:18.5px;color:var(--ink-soft);max-width:30em}
.hero-actions{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-fine{margin-top:20px;font-size:13.5px;color:var(--ink-faint);max-width:38em}

/* hero vignette */
.vignette{position:relative;filter:drop-shadow(var(--shadow-float));transform:rotate(.6deg)}
.vignette-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;
}
.vignette-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.vignette-head .hello{font-family:var(--display);font-size:19px;font-weight:560}
.vignette-head .today{font-size:13px;color:var(--ink-faint)}
.vignette-counts{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.order-card{border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px;background:#fff}
.order-card + .order-card{margin-top:10px}
.order-top{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;color:var(--ink-faint)}
.order-item{margin-top:6px;font-weight:600;font-size:16px}
.order-meta{margin-top:2px;font-size:13.5px;color:var(--ink-soft)}
.order-foot{margin-top:12px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.order-cost{font-size:14px;color:var(--ink-soft)}
.order-cost strong{color:var(--ink)}
.printed-note{
  position:absolute;left:24px;right:24px;bottom:24px;background:var(--ok-tint);color:var(--ok);
  border-radius:12px;padding:12px 16px;font-weight:600;font-size:14px;text-align:center;
  opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s;pointer-events:none;
}
.printed-note.show{opacity:1;transform:none}
.vignette .stamp{
  position:absolute;top:-18px;right:-14px;background:var(--indigo);color:#fff;border-radius:999px;
  font-size:12.5px;font-weight:700;padding:8px 14px;transform:rotate(4deg);letter-spacing:.04em;
  box-shadow:var(--shadow-soft);
}

/* ---------- logo belt ---------- */
.belt{padding:58px 0 64px;border-block:1px solid var(--line);background:var(--surface)}
.belt-head{text-align:center;margin-bottom:34px}
.belt-head h2{font-family:var(--display);font-weight:560;font-size:clamp(22px,2.6vw,30px);letter-spacing:-.01em}
.belt-rows{display:grid;gap:18px}
.belt-row{display:flex;align-items:center;gap:14px}
.belt-label{
  flex:0 0 92px;font-size:12px;font-weight:700;color:var(--ink-faint);letter-spacing:.02em;
  text-align:right;padding-right:6px;
}
.marquee{flex:1;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.marquee-track{display:flex;gap:12px;width:max-content;animation:belt-scroll 36s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes belt-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none;flex-wrap:wrap;width:auto}}
.logo-pill{
  display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:999px;
  background:var(--bg);padding:11px 20px;font-weight:600;font-size:15px;color:var(--ink-soft);white-space:nowrap;
}
.logo-pill img{height:20px;width:auto}
.logo-pill .mark{font-weight:800;font-size:17px;line-height:1}
.mark-jp{color:#E60012}
.belt-note{margin-top:26px;text-align:center;font-size:12.5px;color:var(--ink-faint);max-width:62em;margin-inline:auto}

/* ---------- tracking timeline ---------- */
.section{padding:104px 0}
.section-head{max-width:620px;margin-bottom:52px}
.section-head h2{font-family:var(--display);font-weight:560;font-size:clamp(30px,3.6vw,44px);line-height:1.1;letter-spacing:-.012em}
.section-head p{margin-top:14px;color:var(--ink-soft);font-size:17px}

.track-card{
  max-width:720px;margin:0 auto;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:40px 44px;box-shadow:var(--shadow-soft);position:relative;
}
.track-head{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:baseline;border-bottom:1px dashed var(--line-strong);padding-bottom:18px;margin-bottom:8px}
.track-head .no{font-size:13px;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.track-head .route{font-weight:600;font-size:15.5px}
.tl{list-style:none;position:relative;padding-top:10px}
.tl::before{
  content:"";position:absolute;left:7px;top:18px;bottom:26px;width:2px;
  background-image:linear-gradient(var(--line-strong) 55%,transparent 45%);background-size:2px 9px;
}
.tl-item{position:relative;padding:14px 0 14px 38px;opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s ease}
.tl-item.visible{opacity:1;transform:none}
.tl-item::before{
  content:"";position:absolute;left:0;top:21px;width:16px;height:16px;border-radius:50%;
  background:var(--surface);border:2px solid var(--line-strong);
}
.tl-item.done::before{background:var(--ok);border-color:var(--ok)}
.tl-item.pulse::before{background:var(--indigo);border-color:var(--indigo);box-shadow:0 0 0 5px var(--indigo-tint)}
.tl-row{display:flex;justify-content:space-between;gap:14px;align-items:baseline}
.tl-row h3{font-size:16.5px;letter-spacing:-.01em}
.tl-row time{font-size:13px;color:var(--ink-faint);font-variant-numeric:tabular-nums;white-space:nowrap}
.tl-item p{margin-top:3px;font-size:14.5px;color:var(--ink-soft);max-width:34em}

/* ---------- modes dial ---------- */
.modes-wrap{max-width:860px;margin:0 auto}
.dial{
  position:relative;display:grid;grid-template-columns:repeat(3,1fr);
  background:var(--bg-deep);border:1px solid var(--line);border-radius:999px;padding:6px;margin-bottom:40px;
}
.dial-thumb{
  position:absolute;top:6px;bottom:6px;left:6px;width:calc(33.333% - 4px);border-radius:999px;
  background:var(--surface);box-shadow:var(--shadow-soft);border:1px solid var(--line);
  transition:transform .35s cubic-bezier(.3,.9,.3,1);
}
.dial[data-pos="1"] .dial-thumb{transform:translateX(calc(100% + 0px))}
.dial[data-pos="2"] .dial-thumb{transform:translateX(calc(200% + 0px))}
.dial button{
  position:relative;z-index:1;padding:14px 10px;border-radius:999px;font-weight:600;font-size:15.5px;color:var(--ink-faint);
  transition:color .25s;text-align:center;
}
.dial button.active{color:var(--ink)}
.dial button .tiny{display:block;font-size:11.5px;font-weight:500;margin-top:1px;color:var(--ink-faint)}

.mode-stage{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.mode-copy h3{font-family:var(--display);font-weight:560;font-size:clamp(24px,2.8vw,32px);letter-spacing:-.01em}
.mode-copy .who{display:block;margin-top:6px;font-size:14px;color:var(--ink-faint)}
.mode-copy ul{list-style:none;margin-top:20px;display:grid;gap:12px}
.mode-copy li{position:relative;padding-left:30px;font-size:16px;color:var(--ink-soft)}
.mode-copy li::before{
  content:"";position:absolute;left:0;top:4px;width:18px;height:18px;border-radius:50%;
  background:var(--ok-tint);
}
.mode-copy li::after{
  content:"";position:absolute;left:5px;top:9px;width:8px;height:5px;
  border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg);
}
.meter{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;box-shadow:var(--shadow-soft);
}
.meter h4{font-size:13px;font-weight:700;color:var(--ink-faint);margin-bottom:18px}
.meter-row{display:flex;justify-content:space-between;align-items:center;font-size:14.5px;padding:11px 0;border-bottom:1px solid var(--line)}
.meter-row:last-child{border-bottom:none}
.meter-row .val{font-weight:600;font-size:13.5px}
.meter-row .val.you{color:var(--indigo)}
.meter-row .val.auto{color:var(--ok)}
.meter-bar{height:8px;border-radius:999px;background:var(--bg-deep);margin:4px 0 18px;overflow:hidden}
.meter-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--indigo),var(--ok));transition:width .5s cubic-bezier(.3,.9,.3,1)}

/* ---------- honesty ledger ---------- */
.honest{background:var(--surface);border-block:1px solid var(--line)}
.ledger{max-width:860px;margin:0 auto}
.ledger-row{
  display:grid;grid-template-columns:260px 1fr;gap:28px;padding:26px 0;border-bottom:1px solid var(--line);
}
.ledger-row:last-child{border-bottom:none}
.ledger-row h3{font-family:var(--display);font-weight:560;font-size:20px;letter-spacing:-.01em}
.ledger-row p{font-size:15.5px;color:var(--ink-soft)}

/* ---------- pricing tickets ---------- */
.pricing{background:var(--bg-deep)}
.tickets{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.ticket{
  position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow-soft);
  transition:transform .25s ease,box-shadow .25s ease;
}
.ticket:hover{transform:translateY(-4px);box-shadow:var(--shadow-float)}
.ticket-top{padding:30px 30px 24px}
.ticket-top .plan{font-size:13px;font-weight:700;color:var(--ink-faint)}
.ticket-top .amount{font-family:var(--display);font-weight:560;font-size:46px;letter-spacing:-.02em;margin-top:10px;line-height:1}
.ticket-top .amount span{font-family:var(--body);font-size:14px;font-weight:500;color:var(--ink-faint);letter-spacing:0}
.ticket-top .per{margin-top:8px;font-size:14.5px;color:var(--ink-soft)}
.ticket-tear{
  position:relative;height:0;border-top:2px dashed var(--line-strong);margin:0 14px;
}
.ticket-tear::before,.ticket-tear::after{
  content:"";position:absolute;top:-12px;width:24px;height:24px;border-radius:50%;background:var(--bg-deep);
  border:1px solid var(--line);
}
.ticket-tear::before{left:-27px}
.ticket-tear::after{right:-27px}
.ticket-body{padding:24px 30px 30px;display:flex;flex-direction:column;gap:0;flex:1}
.ticket-body ul{list-style:none;display:grid;gap:10px;flex:1}
.ticket-body li{font-size:14.5px;color:var(--ink-soft);padding-left:22px;position:relative}
.ticket-body li::before{content:"";position:absolute;left:2px;top:7px;width:7px;height:7px;border-radius:50%;background:var(--indigo-tint);border:2px solid var(--indigo)}
.ticket-body .btn{margin-top:22px;width:100%}
.barcode{
  height:34px;margin-top:20px;border-radius:4px;opacity:.85;
  background:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 5px,currentColor 5px 6px,transparent 6px 10px,currentColor 10px 13px,transparent 13px 16px);
  color:var(--line-strong);
}
.ticket.featured{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.ticket.featured .plan{color:#B9B7AC}
.ticket.featured .per{color:#CFCEC5}
.ticket.featured .ticket-tear{border-top-color:#4A4943}
.ticket.featured .ticket-tear::before,.ticket.featured .ticket-tear::after{background:var(--bg-deep);border-color:var(--line)}
.ticket.featured li{color:#D8D7CE}
.ticket.featured li::before{background:transparent;border-color:#8FA6C9}
.ticket.featured .barcode{color:#4A4943}
.ticket .flag{
  position:absolute;top:22px;right:-34px;transform:rotate(45deg);background:var(--indigo);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.06em;padding:5px 40px;
}
.price-note{margin-top:30px;font-size:12.5px;color:var(--ink-faint);max-width:68em}

/* ---------- CTA ---------- */
.cta{padding:120px 0;text-align:center}
.cta h2{font-family:var(--display);font-weight:560;font-size:clamp(32px,4.4vw,56px);letter-spacing:-.015em;line-height:1.08}
.cta h2 .accent{color:var(--indigo);font-style:italic}
.cta p{margin:18px auto 34px;color:var(--ink-soft);max-width:36em;font-size:17.5px}

/* ---------- house footer ---------- */
footer{background:var(--surface);border-top:1px solid var(--line);padding:64px 0 36px;font-size:14px}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px}
.foot-brand .brand{font-size:19px}
.foot-brand .tag{margin-top:10px;color:var(--ink-soft);max-width:22em}
.foot-brand .built{margin-top:16px;color:var(--ink-faint);font-size:13.5px}
.foot-brand .insta{display:inline-block;margin-top:8px;color:var(--indigo);font-weight:600;font-size:13.5px}
.foot-col h4{font-size:12.5px;font-weight:700;color:var(--ink-faint);margin-bottom:14px}
.foot-col ul{list-style:none;display:grid;gap:9px}
.foot-col a{color:var(--ink-soft)}
.foot-col a:hover{color:var(--ink)}
.foot-company{margin-top:52px;padding-top:26px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:var(--ink-faint);font-size:13px}
.foot-company .addr{line-height:1.7}
.foot-legal{margin-top:26px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--ink-faint);font-size:12.5px}

/* ---------- version switch ---------- */
.ver-switch{
  position:fixed;left:18px;bottom:18px;z-index:80;display:inline-flex;align-items:center;gap:8px;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:999px;padding:8px 14px;
  font-size:12.5px;font-weight:600;color:var(--ink-soft);box-shadow:var(--shadow-soft);
}
.ver-switch:hover{color:var(--ink);border-color:var(--ink-faint)}
.ver-switch b{color:var(--indigo)}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:48px}
  .mode-stage{grid-template-columns:1fr;gap:30px}
  .tickets{grid-template-columns:1fr;max-width:460px;margin-inline:auto}
  .ledger-row{grid-template-columns:1fr;gap:8px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .topnav{display:none}
  .track-card{padding:28px 22px}
  .belt-row{flex-direction:column;align-items:stretch}
  .belt-label{flex:none;text-align:left;padding:0 0 2px}
}
@media(max-width:560px){
  .foot-grid{grid-template-columns:1fr}
  .dial button{font-size:13.5px;padding:12px 4px}
  .dial button .tiny{display:none}
  .hero{padding:72px 0 64px}
  .section{padding:76px 0}
}