/* Matching-app palette: lavender × coral pink */
:root {
  --ink: #2d2538;
  --muted: #716979;
  --paper: #fff8fb;
  --green: #6950d8;
  --mint: #eee9ff;
  --peach: #ff638f;
  --line: #eadfea;
  --shadow: 0 24px 70px rgba(77, 51, 121, 0.14);
}

body { background: linear-gradient(180deg, #fff8fb 0%, #faf8ff 38%, #fff8fb 100%); }
.disclosure { background: #34264e; }
.brand-mark { background: linear-gradient(135deg, #ff638f, #9b66ed); box-shadow: 0 7px 18px rgba(164,78,174,.22); }
.button.primary { background: linear-gradient(135deg, #7657e7, #ff638f); box-shadow: 0 12px 30px rgba(113,73,205,.28); }
.button.primary:hover { box-shadow: 0 16px 38px rgba(255,99,143,.3); }
.hero { position: relative; }
.hero::before { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; left: -230px; top: 70px; background: radial-gradient(circle, rgba(255,99,143,.12), rgba(255,99,143,0) 68%); pointer-events: none; }
.phone-card { background: linear-gradient(155deg, #fff 0 46%, #f4efff 46%); border-color: #fff; box-shadow: 0 30px 80px rgba(92,58,151,.2); }
.avatar-a { background: linear-gradient(135deg, #ff789d, #d35482); }
.avatar-b { background: linear-gradient(135deg, #8b6ae9, #6042bd); }
.match-dot { background: linear-gradient(135deg, #ff638f, #9c61e9); }
.confirmed { color: #51465e; }
.orbit { border-color: rgba(105,80,216,.18); }
.float-card b { color: #855fe1; }
.pain { background: #fff; }
.pain-grid article { background: linear-gradient(160deg, #fff 35%, #fff7fb); transition: .25s ease; }
.pain-grid article:hover { transform: translateY(-4px); border-color: #e9bdd0; box-shadow: 0 16px 40px rgba(130,82,145,.1); }
.accent-cell { background: #f1edff; }
.steps { background: linear-gradient(145deg, #35264f 0%, #5f43af 60%, #7a50c6 100%); }
.steps .kicker { color: #d7c9ff; }
.step-icon { background: rgba(255,255,255,.07); }
.service-card { background: linear-gradient(145deg, #fff 62%, #faf0ff); }
.fact-card { background: linear-gradient(160deg, #f8f2ff, #fff5f8); }
.fit { background: linear-gradient(180deg, #fff, #fcf7ff); }
.quiz-card { background: linear-gradient(145deg, #f5f0ff, #fff4f8); border: 1px solid #eee1f1; }
.quiz-result { box-shadow: 0 12px 30px rgba(91,60,133,.09); }
.safety { background: linear-gradient(135deg, #f0eaff, #ffeef4); }
.safety-note { background: linear-gradient(145deg, #3a2856, #6b4dbe); }
.cta { background: linear-gradient(135deg, #ff628f 0%, #d95dab 50%, #8060df 100%); }
.cta .kicker, .cta small { color: #4d2455; }
.button.light { color: #6545be; box-shadow: 0 12px 30px rgba(71,38,117,.16); }
footer { background: #271e35; }

/* Independently designed product-experience mockups */
.app-demo { background: #fff; overflow: hidden; }
.demo-notice { display: flex; align-items: center; gap: 12px; max-width: 820px; margin: -22px 0 55px; padding: 14px 18px; border-radius: 14px; background: #f7f2ff; color: #6d6177; font-size: 12px; }
.demo-notice span { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #7358dc; color: #fff; font: 600 12px "Outfit"; }
.demo-track { display: grid; gap: 110px; }
.demo-scene { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 80px; min-height: 620px; padding: 55px 7%; border-radius: 36px; background: linear-gradient(135deg,#fff6fa,#f5f0ff); }
.demo-scene.reverse { grid-template-columns: 1.2fr .8fr; background: linear-gradient(135deg,#f4f0ff,#fff8fb); }
.demo-scene.reverse .demo-caption { order: 2; }
.demo-scene.reverse .mock-phone { justify-self: start; }
.demo-caption { max-width: 420px; }
.demo-caption > span { display: inline-block; color: #ff638f; font: 600 12px "Outfit"; letter-spacing: .16em; margin-bottom: 18px; }
.demo-caption h3 { font-size: clamp(30px,3.3vw,46px); line-height: 1.28; letter-spacing: -.04em; margin-bottom: 18px; }
.demo-caption p { color: var(--muted); }
.mock-phone { position: relative; justify-self: end; width: 318px; min-height: 594px; padding: 14px 12px 19px; border: 8px solid #312a38; border-radius: 46px; background: #fff; box-shadow: 0 34px 75px rgba(66,38,100,.22); overflow: hidden; }
.mock-status { height: 22px; padding: 0 10px; display: flex; justify-content: space-between; align-items: center; color: #332d39; font: 600 10px "Outfit"; }
.mock-appbar { height: 48px; padding: 0 8px; display: grid; grid-template-columns: 28px 1fr 28px; align-items: center; text-align: center; border-bottom: 1px solid #f0e8f0; color: #393140; font-size: 13px; }
.back-dot { font-size: 23px; font-weight: 400; }
.mock-body { padding: 20px 13px 8px; }
.mock-label { margin: 0 0 9px; color: #746b78; font-size: 10px; font-weight: 700; }
.date-choice { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 21px; }
.date-choice button { padding: 9px 3px; border: 1px solid #ece3ec; border-radius: 13px; background: #fff; color: #675f6b; }
.date-choice button small,.date-choice button b { display: block; }
.date-choice button b { font: 600 17px "Outfit"; margin-top: 2px; }
.date-choice button.selected { border-color: #aa8ef0; background: #f3efff; color: #6748bf; box-shadow: inset 0 0 0 1px #aa8ef0; }
.mock-chips { display: flex; gap: 6px; margin-bottom: 21px; }
.mock-chips span { padding: 7px 9px; border: 1px solid #e9e1e9; border-radius: 10px; font-size: 9px; }
.mock-chips span.active { background: #6f54d8; border-color: #6f54d8; color: #fff; }
.mock-select { display: flex; justify-content: space-between; align-items: center; padding: 12px; border: 1px solid #e9e1e9; border-radius: 12px; color: #4a424e; font-size: 11px; }
.mock-tip,.privacy-note { display: flex; align-items: flex-start; gap: 9px; margin: 20px 0; padding: 12px; border-radius: 12px; background: #fff4f8; color: #7a5f6a; }
.mock-tip span { color: #ff638f; }
.mock-tip p,.privacy-note p { margin: 0; font-size: 9px; line-height: 1.65; }
.mock-button { margin-top: 20px; padding: 12px; border-radius: 13px; background: linear-gradient(135deg,#7457df,#fa638f); color: #fff; text-align: center; font-size: 11px; font-weight: 700; box-shadow: 0 9px 20px rgba(126,75,190,.2); }
.image-label { position: absolute; right: 12px; bottom: 6px; color: #a49ba6; font-size: 8px; }
.dark-screen { color: #fff; background: radial-gradient(circle at 50% 32%,#6046a5,#2c213f 70%); }
.dark-screen .mock-status,.dark-screen .mock-appbar { color: #fff; }
.dark-screen .mock-appbar { border-color: rgba(255,255,255,.12); }
.matching-body { text-align: center; padding-top: 48px; }
.ai-orb { position: relative; width: 130px; height: 130px; margin: 0 auto 30px; display: grid; place-items: center; }
.ai-orb i { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; animation: pulse 2.4s infinite; }
.ai-orb i:nth-child(2) { inset: 15px; animation-delay: .5s; }
.ai-orb strong { width: 78px; height: 78px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg,#ff719a,#8d66e9); box-shadow: 0 0 35px rgba(255,113,154,.35); font: 600 25px "Outfit"; }
@keyframes pulse { 50% { transform: scale(1.08); opacity: .55; } }
.matching-body h4 { margin-bottom: 8px; font-size: 18px; }
.matching-body > p { color: #d6cfe0; font-size: 10px; }
.matching-status { margin: 36px 0 28px; display: grid; gap: 10px; text-align: left; }
.matching-status div { display: flex; justify-content: space-between; align-items: center; padding: 13px 14px; border: 1px solid rgba(255,255,255,.14); border-radius: 13px; background: rgba(255,255,255,.07); }
.matching-status span { color: #dcd3e6; font-size: 9px; }
.matching-status b { color: #ff93b1; font-size: 9px; }
.analysis-bars { margin: 38px 0 28px; text-align: left; }
.analysis-bars div { display: grid; grid-template-columns: 75px 1fr; align-items: center; margin: 14px 0; }
.analysis-bars span { color: #dcd3e6; font-size: 9px; }
.analysis-bars i { height: 5px; background: rgba(255,255,255,.12); border-radius: 10px; overflow: hidden; }
.analysis-bars b { display: block; height: 100%; border-radius: 10px; background: linear-gradient(90deg,#b293ff,#ff779e); }
.matching-body > small { color: #afa3bf; font-size: 8px; }
.confirmed-body { text-align: center; }
.success-mark { width: 62px; height: 62px; margin: 8px auto 14px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg,#7357dd,#ff678f); color: #fff; font-size: 24px; }
.tiny-upper { margin: 0; color: #9e8da5; font: 600 8px "Outfit"; letter-spacing: .18em; }
.confirmed-body h4 { margin: 3px 0 18px; font-size: 18px; }
.ticket { padding: 18px; border-radius: 17px; background: linear-gradient(145deg,#f4f0ff,#fff5f8); text-align: left; }
.ticket-date { display: flex; align-items: center; gap: 15px; }
.ticket-date > b { font: 600 45px/1 "Outfit"; color: #7054d6; }
.ticket-date > span { color: #6b626f; font-size: 10px; line-height: 1.45; }
.ticket-line { border-top: 1px dashed #d9ccde; margin: 15px 0; }
.ticket-info { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 16px; }
.ticket-info span { color: #a194a7; font: 600 7px "Outfit"; }
.ticket-info b { color: #4c4351; font-size: 10px; }
.privacy-note { background: #f4f1f7; text-align: left; }
.privacy-note span { color: #7458dc; }
.report-screen { background: #fffafd; }
.feedback-card { display: grid; gap: 5px; margin: 0 0 10px; padding: 14px; border: 1px solid #eadfeb; border-radius: 13px; background: #fff; }
.feedback-card span { color: #9b8da0; font-size: 8px; }
.feedback-card b { color: #514657; font-size: 10px; }
.demo-source { margin: 30px 4px 0; color: #918696; font-size: 10px; }
.report-score { text-align: center; }
.report-score small { display: block; color: #8f8393; font-size: 9px; }
.report-score strong { font: 600 55px/1.2 "Outfit"; color: #6f54d8; }
.report-score span { color: #9b929d; font-size: 10px; }
.radar-mock { position: relative; width: 160px; height: 145px; margin: 12px auto 18px; }
.radar-mock::before,.radar-mock::after,.radar-mock i { content: ""; position: absolute; inset: 18px 25px; clip-path: polygon(50% 0,100% 40%,81% 100%,19% 100%,0 40%); }
.radar-mock::before { border: 1px solid #e0d5e2; background: #f9f5fb; }
.radar-mock::after { inset: 37px 42px; background: rgba(121,88,220,.23); }
.radar-mock i { inset: 28px 34px; background: rgba(255,99,143,.38); clip-path: polygon(50% 8%,92% 43%,70% 91%,25% 78%,9% 37%); }
.radar-mock .axis { position: absolute; color: #948998; font-size: 7px; z-index: 2; }
.a1 { top: 0; left: 69px; }.a2 { right: 0; top: 51px; }.a3 { right: 18px; bottom: 0; }.a4 { left: 3px; bottom: 31px; }
.report-card { padding: 13px; border-radius: 13px; background: #fff; border: 1px solid #eee3ee; box-shadow: 0 8px 20px rgba(70,44,85,.06); }
.report-card span { color: #a395a7; font-size: 8px; }.report-card b { display: block; margin: 2px 0 4px; color: #4c3f52; font-size: 11px; }.report-card p { margin: 0; color: #7d717f; font-size: 8px; }
.sample-note { display: block; margin-top: 10px; color: #aaa1ac; text-align: center; font-size: 7px; }

@media (max-width: 850px) {
  .demo-scene,.demo-scene.reverse { grid-template-columns: 1fr; gap: 35px; min-height: auto; padding: 48px 25px; }
  .demo-scene.reverse .demo-caption { order: 0; }
  .demo-scene .mock-phone,.demo-scene.reverse .mock-phone { justify-self: center; }
  .demo-track { gap: 45px; }
}
@media (max-width: 430px) {
  .demo-scene,.demo-scene.reverse { margin: 0 -4px; border-radius: 25px; padding: 38px 16px; }
  .mock-phone { width: 286px; min-height: 565px; transform: scale(.96); }
  .demo-notice { align-items: flex-start; }
}

/* Mobile-first refinements */
@media (max-width: 640px) {
  html { scroll-padding-top: 20px; }
  body { overflow-x: hidden; font-size: 15px; line-height: 1.75; }
  .disclosure { padding: 8px 12px; font-size: 10px; line-height: 1.5; }
  .site-header { height: 62px; padding: 0 16px; }
  .brand { gap: 9px; font-size: 14px; }
  .brand-mark { width: 31px; height: 31px; font-size: 16px; }
  .hero { min-height: auto; padding: 38px 18px 66px; gap: 28px; }
  .eyebrow { font-size: 10px; letter-spacing: .12em; }
  .eyebrow span { width: 22px; }
  h1 { margin: 17px 0 18px; font-size: clamp(35px, 10.7vw, 46px); line-height: 1.24; letter-spacing: -.055em; }
  h1 br { display: none; }
  h1 em { white-space: nowrap; }
  .lead { font-size: 14px; line-height: 1.85; }
  .hero-actions { width: 100%; margin-top: 25px; gap: 14px; }
  .hero-actions .button { width: 100%; min-height: 52px; padding: 15px 16px; }
  .hero-actions .text-link { align-self: center; padding: 4px; font-size: 13px; }
  .micro-points { margin-top: 23px; gap: 8px 14px; font-size: 10px; }
  .hero-visual { width: 100%; min-height: 410px; margin: 0; transform: none; }
  .phone-card { width: min(74vw, 270px); height: 410px; padding: 18px; border-width: 7px; border-radius: 38px; }
  .calendar-label { margin-top: 25px; }
  .date-number { font-size: 78px; }
  .match-line { margin: 22px 0 20px; }
  .orbit-one { width: min(106vw, 400px); height: min(106vw, 400px); }
  .orbit-two { width: min(82vw, 310px); height: min(82vw, 310px); }
  .float-card { padding: 10px 12px; border-radius: 14px; font-size: 9px; }
  .float-card b { font-size: 16px; }
  .float-ai { top: 62px; right: 0; }
  .float-chat { bottom: 58px; left: 0; }
  .section-pad { padding: 68px 18px; }
  .section-head { margin-bottom: 31px; }
  .section-head h2 { margin-top: 9px; font-size: clamp(29px, 8vw, 37px); line-height: 1.38; }
  .section-head h2 br { display: none; }
  .section-head p:last-child { margin-top: 16px; font-size: 13px; }
  .kicker { font-size: 10px; letter-spacing: .15em; }
  .pain-grid { gap: 11px; }
  .pain-grid article { padding: 22px 20px; }
  .pain-grid h3 { margin: 13px 0 5px; font-size: 18px; }
  .pain-grid p { font-size: 13px; }
  .turning-point { margin: 28px 5px 0; font-size: 14px; }
  .comparison { overflow: visible; border: 0; border-radius: 0; background: transparent; }
  .comparison-header { display: none; }
  .comparison-row { display: grid; grid-template-columns: 1fr 1fr; min-width: 0; margin-bottom: 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
  .comparison-row > div { padding: 14px 13px; border: 0; font-size: 12px; }
  .comparison-row > div:first-child { grid-column: 1 / -1; padding: 10px 13px; border-bottom: 1px solid var(--line); background: #f3eff6; font-size: 11px; font-weight: 700; }
  .comparison-row > div:nth-child(2)::before,.comparison-row > div:nth-child(3)::before { display: block; margin-bottom: 5px; color: #998e9e; font-size: 9px; font-weight: 600; }
  .comparison-row > div:nth-child(2)::before { content: "一般的な検索型"; }
  .comparison-row > div:nth-child(3)::before { content: "AI自動型"; }
  .comparison-row > .accent-cell { border-left: 1px solid var(--line); background: #f7f2ff; }
  .comparison-note { margin: 14px 2px 0; font-size: 10px; }
  .steps-grid { gap: 0; }
  .steps-grid article { position: relative; padding: 0 0 30px 69px; }
  .steps-grid article:last-child { padding-bottom: 0; }
  .steps-grid article:not(:last-child)::before { content: ""; position: absolute; top: 48px; bottom: 5px; left: 23px; width: 1px; background: rgba(255,255,255,.22); }
  .step-icon { position: absolute; top: 0; left: 0; width: 47px; height: 47px; }
  .steps-grid h3 { margin: 0 0 7px; padding-top: 4px; font-size: 19px; }
  .steps-grid p { margin: 0; font-size: 13px; }
  .app-demo .section-head { margin-bottom: 24px; }
  .demo-notice { margin: 0 0 30px; padding: 12px 13px; font-size: 10px; line-height: 1.65; }
  .demo-track { gap: 26px; }
  .demo-scene,.demo-scene.reverse { gap: 25px; margin: 0; padding: 30px 14px 25px; border-radius: 22px; }
  .demo-caption { padding: 0 4px; }
  .demo-caption > span { margin-bottom: 9px; font-size: 10px; }
  .demo-caption h3 { margin-bottom: 9px; font-size: 25px; }
  .demo-caption p { margin-bottom: 0; font-size: 12px; }
  .mock-phone { width: min(100%, 286px); min-height: 540px; transform: none; border-width: 7px; border-radius: 39px; }
  .demo-source { font-size: 9px; line-height: 1.65; }
  .service-card { padding: 27px 18px; gap: 25px; border-radius: 22px; }
  .service-copy h2 { font-size: 30px; }
  .service-copy > p { font-size: 13px; }
  .check-list { gap: 11px; }
  .check-list li { display: grid; grid-template-columns: 25px 1fr; align-items: center; font-size: 12px; }
  .check-list li span { margin-right: 0; }
  .fact-card { padding: 20px 17px; }
  .fact-card div { padding: 13px 0; }
  .quiz-card { padding: 22px 16px; border-radius: 20px; }
  .quiz-card fieldset { padding-bottom: 20px; margin-bottom: 20px; }
  .quiz-card legend { font-size: 14px; line-height: 1.65; }
  .quiz-card label { width: calc(50% - 5px); min-height: 48px; margin: 0; padding: 10px 12px; border: 1px solid #e4dce7; border-radius: 12px; background: #fff; }
  .quiz-card label + label { margin-left: 6px; }
  .quiz-card .button { width: 100%; min-height: 52px; }
  .quiz-result { padding: 21px 17px; }
  .caution-grid { gap: 11px; }
  .caution-grid article { display: block; padding: 21px 18px; }
  .caution-grid h3 { margin-top: 8px; }
  .safety-main,.safety-note { padding: 25px 19px; }
  .safety-main h3,.safety-note h3 { font-size: 18px; }
  .cta h2 { font-size: clamp(35px, 10vw, 46px); }
  .cta h2 br { display: none; }
  .cta-inner > p { font-size: 13px; }
  .button.light { width: 100%; min-width: 0; min-height: 53px; }
  .cta small { font-size: 9px; line-height: 1.6; }
  .faq-list details { padding: 19px 0; }
  .faq-list summary { align-items: flex-start; font-size: 14px; line-height: 1.65; }
  .faq-list details p { margin: 12px 0 0; font-size: 12px; }
  .sources ul { padding-left: 18px; }
  .sources li { overflow-wrap: anywhere; font-size: 12px; }
  footer { padding: 45px 18px 24px; }
  .footer-top p { margin-top: 15px; font-size: 11px; }
  .footer-links { grid-template-columns: 1fr; gap: 14px; }
  .copyright { margin-top: 35px; }
  .legal-page { padding: 50px 18px 80px; }
  .legal-page h1 { margin-bottom: 28px; font-size: 32px; line-height: 1.35; }
  .legal-page h2 { margin-top: 34px; font-size: 19px; }
  .legal-page p,.legal-page li { font-size: 13px; }
  .contact-card { padding: 23px 18px; }
}
@media (max-width: 350px) {
  .hero,.section-pad { padding-left: 14px; padding-right: 14px; }
  h1 { font-size: 33px; }
  .float-card { padding: 8px 10px; }
  .mock-phone { width: 268px; }
  .quiz-card label { padding-left: 8px; padding-right: 8px; }
}