/* 2026-10-12 — tutoring page: LINE as the main route, pricing, chat examples. */

/* ---- pricing (inside the consultation chapter) ---- */
.pricing { margin-top:clamp(48px,6vw,80px); padding-top:clamp(28px,4vw,44px); border-top:1px solid var(--line); }
.pricing-title { margin:14px 0 22px; font-family:"Noto Serif JP",serif; font-weight:700; font-size:clamp(1.4rem,3vw,2rem); line-height:1.4; }
.pricing-lead { margin:0 0 20px; max-width:62ch; color:#cddaea; font-size:.96rem; line-height:1.9; }
.pricing-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.pricing-grid--3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.pricing-hourly { margin-top:16px; padding:18px 22px; border:1px dashed var(--line2); border-radius:14px; }
.pricing-hourly p { margin:8px 0 0; color:#cddaea; font-size:.94rem; line-height:1.8; }
.pricing-hourly b { color:#fff; }
.plan {
  position:relative;
  padding:26px 26px 28px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--glass);
  backdrop-filter:blur(6px);
}
.plan--featured { border-color:rgba(95,233,219,.55); box-shadow:0 20px 50px -30px rgba(95,233,219,.6); }
.plan-kicker { display:inline-block; margin-bottom:12px; padding:5px 12px; border:1px solid var(--line2); border-radius:2px; color:var(--bio-cyan); font-family:"Cormorant Garamond",serif; font-style:italic; font-size:.95rem; letter-spacing:.12em; }
.plan h4 { margin:0 0 10px; font-family:"Noto Serif JP",serif; font-size:1.12rem; font-weight:600; color:#fff; line-height:1.5; }
.plan-price { margin:0 0 12px; color:#fff; }
.plan-price b { font-family:"Noto Serif JP",serif; font-size:clamp(2.2rem,4vw,3rem); font-weight:700; letter-spacing:-.02em; }
.plan-price small { margin-left:6px; color:var(--muted); font-size:.9rem; }
.plan-body { margin:0; color:#cddaea; font-size:.94rem; line-height:1.85; }
.pricing-note { margin:16px 0 0; color:var(--muted); font-size:.82rem; line-height:1.8; }

/* ---- LINE chapter ---- */
.line-cta { display:grid; gap:12px; justify-items:start; margin-top:8px; }
.line-button {
  display:inline-flex;
  align-items:center;
  gap:14px;
  min-height:64px;
  padding:10px 24px 10px 12px;
  border:1px solid #06c755;
  border-radius:14px;
  background:#06c755;
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:1.05rem;
  line-height:1.3;
  transition:transform .25s ease,background .25s ease;
}
.line-button img { width:44px; height:44px; border-radius:10px; }
.line-button small { display:block; margin-top:3px; font-size:.74rem; font-weight:500; opacity:.9; }
a.line-button:hover,a.line-button:focus-visible { transform:translateY(-2px); background:#05b34c; }
.line-button--pending { border-color:var(--line2); background:rgba(11,26,44,.7); color:#cddaea; cursor:default; }
.line-button--pending img { opacity:.75; }
.line-note { margin:0; color:var(--muted); font-size:.86rem; line-height:1.8; }
.line-note a { color:var(--bio-cyan); }
.line-sub { margin:clamp(40px,5vw,60px) 0 8px; font-family:"Noto Serif JP",serif; font-size:1.25rem; font-weight:600; color:#fff; }
.line-sublead { margin:0 0 18px; color:var(--muted); font-size:.92rem; }
.line-samples { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; align-items:start; }
.line-sample { margin:0; }
/* LINE-like talk screen, built in HTML so the text stays sharp and readable. */
.line-chat {
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  border-radius:24px;
  background:#8cabd9;
  box-shadow:0 24px 60px -34px rgba(0,0,0,.8);
  color:#111;
  font-family:"Noto Sans JP","Hiragino Sans",system-ui,sans-serif;
}
.line-chat__bar {
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  background:#f7f8fa;
  border-bottom:1px solid #dfe3e8;
  font-size:.86rem;
}
.line-chat__bar b { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-weight:700; }
.line-chat__back { flex:none; width:9px; height:9px; border-left:2px solid #333; border-bottom:2px solid #333; transform:rotate(45deg); }
.line-chat__body { display:grid; gap:10px; padding:14px 12px 18px; }
.line-chat__day { justify-self:center; padding:3px 12px; border-radius:999px; background:rgba(0,0,0,.18); color:#fff; font-size:.7rem; }
.lc-row { display:flex; align-items:flex-end; gap:6px; }
.lc-row--out { justify-content:flex-end; }
.lc-row time,.lc-meta { flex:none; color:rgba(0,0,0,.55); font-size:.62rem; line-height:1.3; }
.lc-meta { display:grid; justify-items:end; }
.lc-avatar {
  flex:none;
  align-self:flex-start;
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:50%;
  background:linear-gradient(140deg,#0b1a2c,#1d4a63);
  color:#ffd27a;
  font-family:"Noto Serif JP",serif;
  font-size:.78rem;
  font-weight:700;
}
.lc-bubble {
  margin:0;
  max-width:78%;
  padding:8px 11px;
  border-radius:16px;
  background:#fff;
  color:#111;
  font-size:.8rem;
  line-height:1.6;
  word-break:break-word;
}
.line-chat [class*="phrase-emphasis"] { all:unset; }
.lc-row--in .lc-bubble { border-top-left-radius:4px; }
.lc-row--out .lc-bubble { background:#8de055; border-top-right-radius:4px; }
.lc-bubble--photo { display:flex; align-items:center; gap:8px; }
.lc-bubble--photo::before {
  content:"";
  flex:none;
  width:34px;
  height:26px;
  border-radius:4px;
  background:
    linear-gradient(135deg,transparent 55%,rgba(255,255,255,.7) 55% 62%,transparent 62%),
    linear-gradient(160deg,#cfd8e3,#9fb2c8);
}
.line-sample figcaption { margin-top:12px; color:var(--faint); font-size:.82rem; text-align:center; letter-spacing:.06em; }

@media (max-width:860px) {
  .pricing-grid,.pricing-grid--3 { grid-template-columns:1fr; }
  /* Swipe through the three talks instead of shrinking them. */
  .line-samples {
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:min(84%,340px);
    gap:14px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding-bottom:10px;
    -webkit-overflow-scrolling:touch;
  }
  .line-sample { scroll-snap-align:start; }
}
@media (max-width:520px) {
  .line-button { width:100%; }
}