/* formAI guide — task-first documentation aligned with the dark LP */
.guide-page {
  --text-faint: #8b9ab0;
  --guide-light-bg: #f5f7fa;
  --guide-card: #fff;
  --guide-ink: #16233a;
  --guide-copy: #536177;
  --guide-line: #d9e2e9;
  --guide-mint-soft: #eaf8f3;
  --guide-mint-line: #bfe3d8;
  --guide-mint-ink: #28735f;
  --guide-navy: #193059;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
}
.guide-page main { overflow: hidden; }
.guide-page [id] { scroll-margin-top: 84px; }
.guide-page code {
  padding: 2px 6px;
  border: 1px solid var(--line-2);
  border-radius: 5px;
  background: rgba(255,255,255,.05);
  color: var(--mint-bright);
  font-family: Consolas, "SFMono-Regular", monospace;
  font-size: .9em;
}

.guide-hero {
  position: relative;
  padding: 96px 0 88px;
  background:
    radial-gradient(900px 520px at 82% 8%, rgba(116,207,186,.12), transparent 64%),
    linear-gradient(150deg, #0d1a2c 0%, #0b1322 52%, #10223a 100%);
  border-bottom: 1px solid var(--line);
}
.guide-hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  gap: 68px;
  align-items: center;
}
.guide-hero h1 {
  margin: 0 0 24px;
  color: var(--on-dark);
  font-size: clamp(42px, 5.4vw, 66px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -1.7px;
}
.guide-hero .lead {
  max-width: 590px;
  margin-bottom: 32px;
  color: var(--text);
  font-size: 18px;
  line-height: 1.9;
}
.guide-safety {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding: 12px 18px;
  border: 1px solid rgba(116,207,186,.26);
  border-radius: 999px;
  background: rgba(116,207,186,.07);
  color: var(--mint-bright);
  font-size: 13px;
  font-weight: 600;
}
.guide-safety::before {
  content: "";
  width: 13px;
  height: 8px;
  border-left: 2px solid var(--mint);
  border-bottom: 2px solid var(--mint);
  transform: rotate(-45deg) translateY(-2px);
}

.route-card {
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(22,38,63,.96), rgba(15,28,48,.96));
  box-shadow: 0 38px 90px -45px rgba(0,0,0,.85);
}
.route-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  color: var(--text-mute);
  font-size: 12px;
  letter-spacing: .05em;
}
.route-head strong { color: var(--mint); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
.route-list { list-style: none; padding: 16px 22px 4px; }
.route-list li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
}
.route-list li:last-child { border-bottom: 0; }
.route-n {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--mint);
  color: #082019;
  font-weight: 700;
}
.route-list li > span:last-child { display: flex; flex: 1; justify-content: space-between; gap: 12px; align-items: center; }
.route-list b { color: var(--on-dark); font-size: 15px; }
.route-list small { color: var(--text-faint); font-size: 11px; white-space: nowrap; }
.route-note { margin: 2px 22px 22px; padding: 11px 14px; border-radius: 9px; background: rgba(0,0,0,.18); color: var(--text-mute); font-size: 12px; text-align: center; }

.beginner-map {
  margin: 28px 0 36px;
  padding: 28px;
  border: 1px solid var(--guide-mint-line);
  border-radius: 20px;
  background: var(--guide-card);
  box-shadow: 0 24px 60px -48px rgba(13,31,51,.45);
}
.beginner-map-head { display: flex; justify-content: space-between; gap: 28px; align-items: flex-end; margin-bottom: 24px; }
.beginner-map-head span { color: var(--guide-mint-ink); font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.beginner-map-head h3 { margin-top: 5px; color: var(--guide-ink); font-size: 24px; line-height: 1.35; }
.beginner-map-head p { max-width: 390px; color: var(--guide-copy); font-size: 12px; line-height: 1.7; }
.beginner-map-head p b { color: var(--guide-ink); }
.beginner-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; list-style: none; }
.beginner-flow li {
  position: relative;
  display: grid;
  justify-items: center;
  min-width: 0;
  padding: 18px 12px 14px;
  border: 1px solid var(--guide-line);
  border-radius: 14px;
  background: var(--guide-light-bg);
  text-align: center;
}
.beginner-flow li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -12px;
  z-index: 2;
  /* カード間ギャップ(12px)に収める。白い塗りで隣カードの角を隠すと「崩れ」に見えるため、
     背景は持たせず枠線だけの山括弧(>)にする。 */
  width: 12px;
  height: 12px;
  border-top: 2px solid var(--mint-deep);
  border-right: 2px solid var(--mint-deep);
  transform: translateY(-50%) rotate(45deg);
}
.flow-number { position: absolute; top: 9px; left: 10px; color: var(--guide-mint-ink); font-size: 11px; font-weight: 700; }
.flow-icon { position: relative; display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 12px; border-radius: 15px; background: var(--guide-mint-soft); }
.flow-icon i, .flow-icon i::before, .flow-icon i::after { position: absolute; display: block; content: ""; }
.flow-icon-profile i { width: 14px; height: 14px; top: 10px; border: 2px solid var(--guide-mint-ink); border-radius: 50%; }
.flow-icon-profile i::after { width: 24px; height: 12px; top: 17px; left: -7px; border: 2px solid var(--guide-mint-ink); border-bottom: 0; border-radius: 14px 14px 0 0; }
.flow-icon-window i { width: 30px; height: 23px; border: 2px solid var(--guide-mint-ink); border-radius: 4px; }
.flow-icon-window i::before { top: 5px; left: 0; width: 100%; border-top: 2px solid var(--guide-mint-ink); }
.flow-icon-window i::after { top: 1px; left: 3px; width: 3px; height: 3px; border-radius: 50%; background: var(--guide-mint-ink); }
.flow-icon-draft i { width: 23px; height: 29px; border: 2px solid var(--guide-mint-ink); border-radius: 4px; }
.flow-icon-draft i::before { top: 7px; left: 5px; width: 12px; border-top: 2px solid var(--guide-mint-ink); box-shadow: 0 6px 0 var(--guide-mint-ink), 0 12px 0 var(--guide-mint-ink); }
.flow-icon-check i { width: 26px; height: 26px; border: 2px solid var(--guide-mint-ink); border-radius: 50%; }
.flow-icon-check i::after { width: 11px; height: 6px; top: 7px; left: 6px; border-left: 2px solid var(--guide-mint-ink); border-bottom: 2px solid var(--guide-mint-ink); transform: rotate(-45deg); }
.beginner-flow b { color: var(--guide-ink); font-size: 14px; }
.beginner-flow small { margin-top: 4px; color: var(--guide-copy); font-size: 12px; line-height: 1.5; }
.beginner-flow em { margin-top: 11px; padding: 4px 9px; border-radius: 999px; background: var(--guide-card); color: var(--guide-copy); font-size: 11px; font-style: normal; font-weight: 700; }
.beginner-flow .flow-ai { border-color: var(--guide-mint-line); background: var(--guide-mint-soft); }
.beginner-flow .flow-ai em { background: var(--guide-navy); color: var(--guide-card); }
.beginner-flow li { animation: beginner-step-focus 7.2s ease-in-out infinite; }
.beginner-flow li:nth-child(2) { animation-delay: 2.4s; }
.beginner-flow li:nth-child(3) { animation-delay: 4.8s; }
@keyframes beginner-step-focus { 0%, 8%, 100% { border-color: #dce4e8; box-shadow: none; transform: translateY(0); } 15%, 31% { border-color: #54b79b; box-shadow: 0 0 0 4px rgba(84,183,155,.14); transform: translateY(-4px); } }
.beginner-map-note { margin-top: 14px; padding: 13px 16px; border-radius: 10px; background: var(--guide-navy); color: var(--text); font-size: 12px; line-height: 1.7; }
.beginner-map-note b { color: var(--mint-bright); }
.visual-first-map { display: flex; flex-direction: column; }
.visual-first-map .beginner-map-head { display: contents; }
.visual-first-map .beginner-map-head > div { order: 1; margin-bottom: 18px; }
.visual-first-map .beginner-flow { order: 2; }
.visual-first-map .beginner-map-head > p { order: 3; max-width: none; margin-top: 15px; padding: 11px 14px; border-radius: 9px; background: #fff; }
.visual-first-map .beginner-map-note { order: 4; }

.guide-jump {
  position: relative;
  z-index: 3;
  margin-top: -1px;
  padding: 22px 0;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}
.guide-jump p { margin-bottom: 12px; color: var(--text-faint); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.jump-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.jump-grid a {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 11px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255,255,255,.02);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.jump-grid a:hover { border-color: rgba(116,207,186,.4); background: var(--mint-glow); transform: translateY(-1px); }
.jump-grid span { grid-row: 1 / 3; color: var(--mint); font-size: 11px; font-weight: 700; }
.jump-grid b { color: var(--on-dark); font-size: 13px; }
.jump-grid small { color: var(--text-faint); font-size: 10.5px; }

.guide-section { position: relative; padding: 112px 0; background: var(--bg); }
.guide-section-light { background: #f5f7fa; color: #243044; }
.guide-section-deep { background: var(--bg-2); }
.guide-heading { max-width: 760px; margin-bottom: 54px; }
.guide-heading h2,
.tracking-intro h2 {
  margin-bottom: 18px;
  color: var(--on-dark);
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -1.1px;
}
.guide-heading p,
.tracking-intro p { color: var(--text-mute); font-size: 16px; line-height: 1.85; }
.guide-section-light .section-eyebrow { color: #647087; }
.guide-section-light .guide-heading h2 { color: #16233a; }
.guide-section-light .guide-heading p { color: #647087; }

.before-card {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 32px;
  padding: 20px 24px;
  border: 1px solid #d9e2e9;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 14px 36px -34px rgba(13,31,51,.45);
}
.before-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #dff5ec;
  color: #238263;
  font-weight: 700;
}
.before-card h3 { margin-bottom: 5px; color: #16233a; font-size: 16px; }
.before-card ul { display: flex; flex-wrap: wrap; gap: 8px 28px; list-style: none; color: #647087; font-size: 13px; }
.before-card li::before { content: "✓"; margin-right: 7px; color: #3aa383; font-weight: 700; }
.before-card a { margin-left: auto; color: #207b67; font-size: 12px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.first-try-demo { margin: 0 0 32px; padding: 24px; border: 1px solid #bfe3d8; border-radius: 20px; background: linear-gradient(135deg, #effaf6, #fff); box-shadow: 0 18px 46px -38px rgba(13,31,51,.55); }
.first-try-demo-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; color: #28735f; }
.first-try-demo-head span { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.first-try-demo-head b { color: #16233a; font-size: 18px; }
.first-try-demo-flow { display: grid; grid-template-columns: 1fr 30px 1fr 30px 1fr; gap: 10px; align-items: center; }
.first-try-demo-flow > em { color: #51a88f; font-size: 24px; font-style: normal; text-align: center; }
.first-try-demo-step { position: relative; display: grid; gap: 5px; min-height: 108px; padding: 17px 15px 13px 48px; border: 1px solid #d3e0e2; border-radius: 13px; background: #fff; }
.first-try-demo-step > span { position: absolute; top: 15px; left: 15px; display: grid; place-items: center; width: 25px; height: 25px; border-radius: 8px; background: #d9f0e9; color: #26765f; font-size: 12px; font-weight: 700; }
.first-try-demo-step strong { color: #16233a; font-size: 14px; }
.first-try-demo-step small { color: #647087; font-size: 11px; }
.first-try-demo-step i { width: fit-content; margin-top: 5px; padding: 4px 7px; border-radius: 5px; background: #eef3f6; color: #5d6c7e; font-size: 10px; font-style: normal; font-weight: 700; }
.first-try-demo-step.demo-profile { animation: first-step 6s ease-in-out infinite; }
.first-try-demo-step.demo-draft { animation: first-step 6s 2s ease-in-out infinite; }
.first-try-demo-step.demo-check { animation: first-step 6s 4s ease-in-out infinite; }
.demo-check i { background: #dff5ec; color: #28765e; }
.first-try-demo-note { margin-top: 17px; padding-top: 14px; border-top: 1px solid #d6ebe4; color: #4f6b66; font-size: 12px; line-height: 1.6; }
@keyframes first-step { 0%, 8%, 100% { border-color: #d3e0e2; box-shadow: none; transform: translateY(0); } 16%, 32% { border-color: #54b79b; box-shadow: 0 0 0 4px rgba(84,183,155,.14); transform: translateY(-3px); } }

.guide-step {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 50px;
  align-items: center;
  margin-top: 28px;
  padding: 34px;
  border: 1px solid #dde4eb;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 24px 60px -48px rgba(13,31,51,.45);
}
.guide-step-reverse { grid-template-columns: 1.15fr .85fr; }
.guide-step-reverse .step-copy { order: 2; }
.guide-step-reverse .step-visual { order: 1; }
.visual-first-step { display: flex; flex-direction: column; gap: 0; align-items: stretch; }
.visual-first-step .step-copy { display: contents; }
.visual-first-step .step-kicker { order: 1; }
.visual-first-step .step-copy > h3 { order: 2; margin-bottom: 22px; }
.visual-first-step > .step-visual,
.visual-first-step > .review-send-mock { order: 3; width: 100%; margin-bottom: 24px; }
.visual-first-step .step-copy > :not(.step-kicker):not(h3) { order: 4; }
.step-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
  color: #278970;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.step-kicker span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #cceee4;
  color: #155d4e;
  font-size: 13px;
}
.step-copy h3 { margin-bottom: 20px; color: #16233a; font-size: 27px; line-height: 1.35; letter-spacing: -.4px; }
.action-list { padding-left: 22px; color: #536177; font-size: 14px; line-height: 1.75; }
.action-list li { margin-bottom: 11px; padding-left: 3px; }
.action-list li::marker { color: #41a98d; font-weight: 700; }
.action-list b { color: #16233a; }
.step-visual { overflow: hidden; border: 1px solid #d8e1e9; border-radius: 14px; background: #edf2f7; }
.step-visual figcaption { padding: 12px 16px; background: #fff; color: #59677c; font-size: 11.5px; line-height: 1.6; }
.ui-shot { min-height: 390px; color: #26344a; font-family: 'Noto Sans JP', sans-serif; }
.ui-window-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 46px;
  padding: 0 17px;
  border-bottom: 1px solid #dfe5ec;
  background: #fff;
  color: #24324a;
}
.ui-window-bar b, .ui-popup-brand b { font-family: 'Outfit', sans-serif; font-size: 16px; }
.ui-window-bar em, .ui-popup-brand em { color: #4fb39c; font-style: normal; }
.ui-window-bar small { margin-left: auto; color: #909aaa; font-size: 10px; }
.ui-logo, .ui-popup-brand span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: #14233d;
  color: #8fe3ce;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
}
.ui-settings-body { padding: 22px; }
.ui-section-title { display: flex; align-items: center; gap: 9px; margin: 4px 0 12px; }
.ui-section-title span { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 7px; background: #d9f0e9; color: #26765f; font-size: 11px; font-style: normal; font-weight: 700; }
.ui-section-title b { color: #25334a; font-size: 12px; }
.ui-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 19px; }
.ui-fields label,
.ui-form label {
  display: grid;
  gap: 5px;
  color: #667388;
  font-size: 10px;
  font-style: normal;
}
.ui-fields i,
.ui-form label i {
  min-height: 31px;
  padding: 8px 10px;
  border: 1px solid #d6dfe8;
  border-radius: 6px;
  background: #fff;
  color: #354259;
  font-size: 11px;
  font-style: normal;
}
.ui-textarea { min-height: 61px; padding: 10px; border: 1px solid #d6dfe8; border-radius: 7px; background: #fff; color: #667388; font-size: 10.5px; line-height: 1.6; }
.ui-save, .ui-primary, .ui-secondary { display: grid; place-items: center; border-radius: 7px; font-size: 12px; font-weight: 700; }
.ui-save { width: 105px; height: 32px; margin-top: 13px; background: #193059; color: #fff; }
.settings-shot .ui-fields i,
.settings-shot .ui-textarea { animation: profile-field-fill 5.4s ease-in-out infinite; }
.settings-shot .ui-fields label:nth-child(2) i { animation-delay: .18s; }
.settings-shot .ui-fields label:nth-child(3) i { animation-delay: .36s; }
.settings-shot .ui-fields label:nth-child(4) i { animation-delay: .54s; }
.settings-shot .ui-textarea { animation-delay: .72s; }
.profile-save-animated { animation: profile-save 5.4s ease-in-out infinite; }
.profile-saved { width: fit-content; margin-top: 9px; padding: 6px 9px; border-radius: 6px; background: #e6f7f0; color: #28765e; font-size: 10px; font-weight: 700; opacity: 0; animation: profile-saved 5.4s ease-in-out infinite; }
@keyframes profile-field-fill { 0%, 12%, 100% { color: transparent; background: #fff; } 25%, 86% { color: #354259; background: #f9fffc; } }
@keyframes profile-save { 0%, 54%, 100% { transform: scale(1); } 62%, 72% { transform: scale(.94); background: #315f9f; } }
@keyframes profile-saved { 0%, 69%, 100% { opacity: 0; transform: translateY(4px); } 76%, 92% { opacity: 1; transform: translateY(0); } }
.ui-browser-bar { display: flex; align-items: center; gap: 5px; height: 35px; padding: 0 12px; background: #203b66; }
.multi-page-tabs { display: flex; align-items: end; gap: 4px; min-height: 38px; padding: 8px 10px 0; background: #dfe6ed; }
.multi-page-tabs span { min-width: 68px; padding: 7px 9px; border-radius: 6px 6px 0 0; background: #c6d0db; color: #647387; font-size: 9px; text-align: center; animation: page-tab-switch 7.2s ease-in-out infinite; }
.multi-page-tabs span:nth-child(2) { animation-delay: 2.4s; }
.multi-page-tabs span:nth-child(3) { animation-delay: 4.8s; }
.multi-page-tabs b { margin: 0 0 7px auto; color: #26765f; font-size: 9px; }
.multi-page-lead { margin: -8px 0 18px; padding: 12px 14px; border-left: 3px solid #45aa8b; background: #ecf8f4; color: #536b66; font-size: 12px; line-height: 1.7; }
.multi-page-lead b { color: #21725a; }
.ui-browser-bar i { width: 6px; height: 6px; border-radius: 50%; background: #9bb0cb; }
.ui-browser-bar span { flex: 1; margin-left: 7px; padding: 4px 8px; border-radius: 4px; background: rgba(255,255,255,.11); color: #d5dfec; font-size: 9px; }
.ui-browser-body { display: grid; grid-template-columns: 1fr 165px; min-height: 355px; }
.ui-form { display: grid; gap: 8px; align-content: start; padding: 24px; background: #f7f9fb; }
.ui-form strong { margin-bottom: 3px; color: #23334d; font-size: 14px; }
.ui-form .message i { min-height: 77px; }
.ui-popup { padding: 15px 12px; border-left: 1px solid #d9e1ea; background: #fff; }
.ui-popup-brand { display: flex; align-items: center; gap: 6px; }
.ui-popup-brand span { width: 21px; height: 21px; font-size: 10px; }
.ui-popup-brand b { font-size: 13px; }
.ui-popup p { margin: 10px 0; color: #728095; font-size: 11.5px; line-height: 1.6; }
.ui-primary { min-height: 31px; padding: 6px; background: #193059; color: #fff; text-align: center; }
.draft-button-animated { animation: draft-button-click 7.2s ease-in-out infinite; }
.draft-button-animated,
.review-send-button { position: relative; }
.mock-cursor { position: absolute; z-index: 6; display: block; width: 22px; height: 28px; pointer-events: none; filter: drop-shadow(0 2px 2px rgba(0,0,0,.32)); }
.mock-cursor svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mock-cursor path { fill: #fff; stroke: #172033; stroke-width: 1.8; stroke-linejoin: round; }
.draft-cursor { top: -30px; right: -26px; opacity: 0; animation: draft-cursor-click 7.2s ease-in-out infinite; }
.browser-shot .ui-form label i { animation: draft-field-fill 7.2s ease-in-out infinite; }
.browser-shot .ui-form label:nth-of-type(2) i { animation-delay: .12s; }
.browser-shot .ui-form label:nth-of-type(3) i { animation-delay: .24s; }
.browser-shot .ui-form label:nth-of-type(4) i { animation-delay: .36s; }
@keyframes page-tab-switch { 0%, 8%, 100% { background: #c6d0db; color: #647387; } 15%, 31% { background: #fff; color: #203b66; box-shadow: 0 -2px 0 #45aa8b inset; } }
@keyframes draft-button-click { 0%, 10%, 100% { transform: scale(1); } 16%, 24% { transform: scale(.94); background: #315f9f; } }
@keyframes draft-cursor-click { 0%, 5%, 34%, 100% { opacity: 0; transform: translate(0,0) scale(1); } 8% { opacity: 1; transform: translate(0,0) scale(1); } 16% { opacity: 1; transform: translate(-48px,36px) scale(1); } 21% { opacity: 1; transform: translate(-48px,36px) scale(.78); } 27% { opacity: 1; transform: translate(-48px,36px) scale(1); } }
@keyframes draft-field-fill { 0%, 22%, 100% { color: transparent; background: #fff; } 36%, 82% { color: #354259; background: #f4fcf8; } }
.ui-secondary { min-height: 29px; margin-top: 6px; border: 1px solid #d7dfe8; background: #fff; color: #3f4c60; }
.ui-success { margin-top: 10px; padding: 9px; border: 1px solid #bce6d6; border-radius: 7px; background: #e9f8f2; color: #28765e; font-size: 11.5px; line-height: 1.5; }
.mini-help {
  margin-top: 20px;
  padding: 14px 16px;
  border-left: 3px solid #68c7af;
  background: #f2faf7;
  color: #68758a;
  font-size: 12px;
  line-height: 1.7;
}
.mini-help b { display: block; color: #265e54; margin-bottom: 2px; }
.permission-note { display: flex; gap: 10px; margin-top: 18px; padding: 13px 14px; border-radius: 10px; background: #f0f4f8; }
.permission-note > span { display: grid; place-items: center; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: #dfe8f0; color: #536177; font-size: 12px; font-weight: 700; }
.permission-note p { color: #647087; font-size: 11.5px; line-height: 1.65; }
.permission-note b { color: #334158; }

.pitch-example {
  max-width: 850px;
  margin: 22px 0 0 auto;
  padding: 22px 25px;
  border: 1px solid #bfe3d8;
  border-radius: 14px;
  background: #eaf8f3;
}
.example-label { margin-bottom: 8px; color: #28735f; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pitch-example p { color: #24443c; font-size: 14px; line-height: 1.8; }
.pitch-example small { display: block; margin-top: 9px; color: #48645c; font-size: 11px; line-height: 1.65; }

.final-step { grid-template-columns: 1fr .9fr; }
.success-panel {
  display: flex;
  gap: 15px;
  align-items: flex-start;
  padding: 23px;
  border: 1px solid #b8e5d6;
  border-radius: 14px;
  background: #e9f9f3;
}
.success-check { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: #37a77e; color: #fff; font-weight: 700; }
.success-panel small { display: block; margin-bottom: 6px; color: #598074; font-size: 10.5px; }
.success-panel strong { display: block; margin-bottom: 5px; color: #1d7659; font-size: 16px; }
.success-panel p { color: #5e766f; font-size: 12px; line-height: 1.6; }
.review-send-mock { padding: 20px; border: 1px solid #d8e1e9; border-radius: 14px; background: #f4f7fa; color: #26344a; }
.review-send-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.review-send-head > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #37a77e; color: #fff; font-weight: 700; }
.review-send-head div { display: grid; gap: 2px; }
.review-send-head small { color: #718092; font-size: 9px; }
.review-send-head b { color: #24765c; font-size: 12px; }
.review-send-field { display: grid; grid-template-columns: 70px 1fr auto; gap: 8px; align-items: center; min-height: 39px; margin-top: 7px; padding: 8px 10px; border: 1px solid #d8e1e9; border-radius: 8px; background: #fff; animation: review-field 5.8s ease-in-out infinite; }
.review-send-field.message { min-height: 54px; animation-delay: .7s; }
.review-send-field span { color: #788597; font-size: 9px; }
.review-send-field b { overflow: hidden; color: #344259; font-size: 10px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.review-send-field i { padding: 4px 7px; border-radius: 99px; background: #edf2f6; color: #6a788b; font-size: 8px; font-style: normal; }
.review-send-stop { margin-top: 10px; padding: 7px; border-radius: 7px; background: #fff4d8; color: #8a6813; font-size: 9px; font-weight: 700; text-align: center; animation: review-stop 5.8s ease-in-out infinite; }
.review-send-button { margin-top: 8px; padding: 10px; border-radius: 8px; background: #193059; color: #fff; font-size: 10px; font-weight: 700; text-align: center; animation: review-send-button 5.8s ease-in-out infinite; }
.send-cursor { top: -28px; right: -24px; opacity: 0; animation: send-cursor-click 5.8s ease-in-out infinite; }
@keyframes review-field { 0%, 10%, 100% { border-color: #d8e1e9; box-shadow: none; } 18%, 40% { border-color: #54b79b; box-shadow: 0 0 0 3px rgba(84,183,155,.12); } }
@keyframes review-stop { 0%, 44%, 100% { background: #fff4d8; } 52%, 72% { background: #ffe7a8; } }
@keyframes review-send-button { 0%, 70%, 100% { transform: scale(1); } 78%, 88% { transform: scale(.96); background: #315f9f; } }
@keyframes send-cursor-click { 0%, 58%, 96%, 100% { opacity: 0; transform: translate(0,0) scale(1); } 63% { opacity: 1; transform: translate(0,0) scale(1); } 76% { opacity: 1; transform: translate(-62px,34px) scale(1); } 82% { opacity: 1; transform: translate(-62px,34px) scale(.78); } 89% { opacity: 1; transform: translate(-62px,34px) scale(1); } }
.manual-send-band {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-top: 28px;
  padding: 25px 28px;
  border-radius: 15px;
  background: #13233d;
  color: #fff;
}
.manual-icon { display: grid; place-items: center; flex: 0 0 auto; width: 52px; height: 52px; border: 1px solid rgba(116,207,186,.4); border-radius: 14px; color: #8fe3ce; font-size: 10px; font-weight: 700; letter-spacing: .05em; }
.manual-send-band b { color: #fff; font-size: 17px; }
.manual-send-band p { margin-top: 4px; color: #aab6c7; font-size: 13px; line-height: 1.7; }

.trouble-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.trouble-card { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-soft); }
.trouble-card[open] { border-color: rgba(116,207,186,.34); }
.trouble-card summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 21px 22px;
  color: var(--on-dark);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.trouble-card summary::-webkit-details-marker { display: none; }
.trouble-card summary::after { content: "+"; color: var(--mint); font-size: 22px; font-weight: 300; }
.trouble-card[open] summary::after { content: "−"; }
.trouble-card > div { padding: 0 22px 20px; color: var(--text-mute); font-size: 13px; line-height: 1.8; }
.trouble-card p + p { margin-top: 8px; }

.list-layout { display: grid; grid-template-columns: .88fr 1.12fr; gap: 34px; align-items: center; }
.list-layout-options-only { grid-template-columns: 1fr; }
.list-options { display: grid; gap: 14px; }
.list-card { padding: 25px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.list-layout-options-only .list-card { display: flex; flex-direction: column; gap: 0; align-items: stretch; }
.list-card-copy { display: contents; }
.list-card.sample-card { border-color: rgba(116,207,186,.38); background: linear-gradient(180deg, rgba(116,207,186,.08), var(--panel)); }
.url-card { border-color: rgba(116,207,186,.5); background: linear-gradient(180deg, rgba(116,207,186,.13), var(--panel)); }
.file-icon.url { color: #082019; background: var(--mint); border-color: transparent; }
.list-card-lead { margin: -5px 0 14px; color: var(--mint-bright); font-size: 13px; font-weight: 700; line-height: 1.6; }
.list-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.file-icon { display: grid; place-items: center; min-width: 44px; height: 34px; padding: 0 8px; border: 1px solid rgba(116,207,186,.3); border-radius: 9px; background: var(--mint-glow); color: var(--mint-bright); font-size: 11px; font-weight: 700; }
.file-icon.sheet { color: #a8c8ff; border-color: rgba(130,171,238,.3); background: rgba(130,171,238,.08); }
.plan-chip { display: inline-flex; align-items: center; min-height: 24px; padding: 4px 10px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.plan-chip.free { background: rgba(116,207,186,.12); color: var(--mint-bright); }
.plan-chip.pro { background: rgba(130,171,238,.12); color: #b5d0ff; }
.plan-chip.business { background: var(--mint); color: #082019; }
.list-card h3 { margin-bottom: 13px; color: var(--on-dark); font-size: 19px; }
.list-card h3 small { display: block; margin-bottom: 5px; color: var(--mint); font-size: 11px; font-weight: 700; letter-spacing: .05em; }
.list-layout-options-only .list-card-head { order: 1; }
.list-layout-options-only .list-card h3 { order: 2; }
.list-layout-options-only .option-mock { order: 3; width: 100%; margin: 5px 0 20px; }
.list-layout-options-only .list-card-lead { order: 4; }
.list-layout-options-only .list-value-points { order: 5; }
.list-layout-options-only .list-card-note { order: 6; }
.list-card ol { padding-left: 20px; color: var(--text-mute); font-size: 13px; line-height: 1.7; }
.list-card li { margin-bottom: 7px; }
.list-card li::marker { color: var(--mint); font-weight: 700; }
.sample-note { margin-top: 12px; color: var(--text-mute); font-size: 12px; line-height: 1.7; }
.sample-note code { color: var(--mint-bright); }
.list-value-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 17px; }
.list-value-points span { display: grid; gap: 3px; min-width: 0; padding: 11px 9px; border: 1px solid rgba(116,207,186,.2); border-radius: 10px; background: rgba(255,255,255,.035); }
.list-value-points b { color: var(--on-dark); font-size: 12px; }
.list-value-points small { color: var(--text-faint); font-size: 9px; line-height: 1.4; }
.csv-values span:nth-child(2) { border-color: rgba(116,207,186,.48); background: rgba(116,207,186,.1); }
.csv-values span:nth-child(2) b { color: var(--mint-bright); font-size: 15px; }
.sheet-values span { border-color: rgba(130,171,238,.22); }
.list-card-note { margin-top: 12px; padding-left: 10px; border-left: 2px solid rgba(116,207,186,.48); color: var(--text-mute); font-size: 10px; line-height: 1.6; }
.option-mock { min-height: 190px; padding: 20px; overflow: hidden; border: 1px solid #d5e0e8; border-radius: 14px; background: #f4f7fa; color: #26344a; box-shadow: 0 18px 42px -34px rgba(0,0,0,.65); }
.option-mock-bar { display: flex; align-items: center; gap: 5px; margin: -20px -20px 18px; padding: 11px 14px; border-bottom: 1px solid #dbe3ea; background: #fff; }
.option-mock-bar i { width: 6px; height: 6px; border-radius: 50%; background: #a5b1bf; }
.option-mock-bar span { margin-left: 5px; color: #647287; font-size: 10px; }
.url-mock-field { display: flex; align-items: center; min-height: 38px; padding: 0 11px; overflow: hidden; border: 2px solid #d2dce6; border-radius: 8px; background: #fff; color: #93a0b0; font-size: 10px; animation: option-url-field 5s ease-in-out infinite; }
.url-mock-field b { overflow: hidden; width: 0; color: #33445c; font-size: 11px; font-weight: 500; white-space: nowrap; animation: option-url-type 5s steps(24, end) infinite; }
.url-mock-button { width: 92px; margin: 10px 0 0 auto; padding: 8px; border-radius: 7px; background: #193059; color: #fff; font-size: 11px; font-weight: 700; text-align: center; animation: option-url-button 5s ease-in-out infinite; }
.url-mock-result { display: flex; align-items: center; gap: 9px; margin-top: 11px; padding: 10px; border: 1px solid #bfe4d5; border-radius: 8px; background: #e9f8f2; opacity: 0; transform: translateY(7px); animation: option-url-result 5s ease-in-out infinite; }
.url-mock-result > span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #3aa37d; color: #fff; font-size: 11px; font-weight: 700; }
.url-mock-result div { display: grid; gap: 2px; }
.url-mock-result b { color: #28765e; font-size: 11px; }
.url-mock-result small { color: #66877c; font-size: 9px; }
.csv-mock-file { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid #d7e0e8; border-radius: 10px; background: #fff; }
.csv-mock-file > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; background: #dff5ec; color: #28765e; font-size: 10px; font-weight: 800; }
.csv-mock-file div { display: grid; gap: 2px; }
.csv-mock-file b { color: #293a51; font-size: 11px; }
.csv-mock-file small { color: #7d8998; font-size: 9px; }
.csv-mock-file i { margin-left: auto; color: #3a9677; font-size: 9px; font-style: normal; font-weight: 700; }
.csv-mock-progress { height: 6px; margin-top: 15px; overflow: hidden; border-radius: 99px; background: #dfe6ec; }
.csv-mock-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: #3aa37d; animation: option-csv-progress 5s ease-in-out infinite; }
.csv-mock-scale { display: flex; justify-content: space-between; margin-top: 7px; color: #82909f; font-size: 8px; }
.csv-mock-scale span { padding: 2px 5px; border-radius: 99px; animation: csv-scale-focus 5s ease-in-out infinite; }
.csv-mock-scale span:nth-child(2) { animation-delay: .25s; }
.csv-mock-scale span:nth-child(3) { animation-delay: .5s; }
.csv-mock-count { display: flex; align-items: baseline; justify-content: center; gap: 5px; margin: 13px 0 9px; opacity: 0; animation: option-csv-result 5s ease-in-out infinite; }
.csv-mock-count b { color: #24765c; font-size: 22px; }
.csv-mock-count span { color: #667487; font-size: 10px; }
.csv-mock-rows { display: grid; gap: 4px; }
.csv-mock-rows i { display: block; height: 7px; border-radius: 4px; background: linear-gradient(90deg, #d9e2e9 38%, #edf1f4 38%); opacity: 0; animation: option-csv-row 5s ease-in-out infinite; }
.csv-mock-rows i:nth-child(2) { animation-delay: .12s; }
.csv-mock-rows i:nth-child(3) { animation-delay: .24s; }
.sheet-option-mock { background: #f7faf8; }
.sheet-mock-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: #33465b; }
.sheet-mock-head > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: #2e9a68; color: #fff; }
.sheet-mock-head b { font-size: 12px; }
.sheet-mock-head i { margin-left: auto; padding: 4px 8px; border-radius: 99px; background: #e1f2ea; color: #368064; font-size: 9px; font-style: normal; animation: option-sheet-state 5s ease-in-out infinite; }
.sheet-mock-grid { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid #d5e0da; border-radius: 8px; background: #fff; }
.sheet-mock-grid > * { padding: 8px 10px; border-right: 1px solid #e2e9e5; border-bottom: 1px solid #e2e9e5; color: #607065; font-size: 9px; font-style: normal; }
.sheet-mock-grid b { background: #edf5f0; color: #385244; }
.sheet-mock-grid em { color: #3b8265; }
.sheet-mock-grid .sheet-writing { background: #fff7cf; color: #8a6a12; animation: option-sheet-write 5s ease-in-out infinite; }
.sheet-mock-sync { margin-top: 11px; padding: 8px; border-radius: 7px; background: #ddf3e8; color: #2f7c5d; font-size: 10px; font-weight: 700; text-align: center; opacity: 0; animation: option-sheet-sync 5s ease-in-out infinite; }
@keyframes option-url-field { 0%, 12%, 100% { border-color: #d2dce6; box-shadow: none; } 18%, 62% { border-color: #5f9bdc; box-shadow: 0 0 0 3px rgba(95,155,220,.13); } }
@keyframes option-url-type { 0%, 18%, 100% { width: 0; } 48%, 84% { width: 142px; } }
@keyframes option-url-button { 0%, 48%, 100% { transform: scale(1); } 55%, 66% { transform: scale(.94); background: #315f9f; } }
@keyframes option-url-result { 0%, 62%, 100% { opacity: 0; transform: translateY(7px); } 70%, 90% { opacity: 1; transform: translateY(0); } }
@keyframes option-csv-progress { 0%, 15%, 100% { width: 0; } 58%, 88% { width: 100%; } }
@keyframes csv-scale-focus { 0%, 20%, 100% { background: transparent; color: #82909f; } 42%, 72% { background: #dff5ec; color: #24765c; } }
@keyframes option-csv-result { 0%, 54%, 100% { opacity: 0; transform: translateY(4px); } 64%, 90% { opacity: 1; transform: translateY(0); } }
@keyframes option-csv-row { 0%, 58%, 100% { opacity: 0; transform: translateX(-10px); } 68%, 90% { opacity: 1; transform: translateX(0); } }
@keyframes option-sheet-state { 0%, 24%, 100% { opacity: .55; } 34%, 86% { opacity: 1; } }
@keyframes option-sheet-write { 0%, 28%, 100% { color: #8a6a12; background: #fff7cf; } 54%, 86% { color: #2f7c5d; background: #ddf3e8; } }
@keyframes option-sheet-sync { 0%, 50%, 100% { opacity: 0; transform: translateY(5px); } 60%, 88% { opacity: 1; transform: translateY(0); } }
.list-visual { overflow: hidden; border: 1px solid var(--line-2); border-radius: 18px; background: var(--panel); box-shadow: 0 30px 80px -55px #000; }
.list-visual figcaption { padding: 13px 17px; color: var(--text-mute); font-size: 11.5px; text-align: center; }
.list-shot { min-height: 430px; padding: 28px; background: #f3f7fb; color: #26344a; }
.list-shot-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; color: #20304a; }
.list-shot-head b { font-size: 19px; }
.list-shot-head span { padding: 4px 9px; border-radius: 999px; background: #dfe8f2; color: #65748a; font-size: 10px; }
.list-shot-progress { height: 5px; margin: -5px 0 14px; overflow: hidden; border-radius: 99px; background: #dfe8f2; }
.list-shot-progress span { display: block; width: 50%; height: 100%; border-radius: inherit; background: #3aa37d; animation: list-progress 3.8s ease-in-out infinite; transform-origin: left; }
.list-shot-input { display: flex; align-items: center; gap: 2px; min-height: 38px; margin-bottom: 8px; padding: 5px 7px 5px 10px; border: 2px solid #5f9bdc; border-radius: 8px; background: #fff; color: #94a0b0; font-size: 10px; animation: url-focus 3.8s ease-in-out infinite; }
.list-shot-input b { color: #344762; font-size: 11px; font-weight: 500; }
.list-shot-input i { margin-left: auto; padding: 6px 9px; border-radius: 5px; background: #315f9f; color: #fff; font-size: 10px; font-style: normal; font-weight: 700; animation: url-add 3.8s ease-in-out infinite; }
.list-shot-added { display: flex; align-items: center; gap: 8px; min-height: 39px; margin-bottom: 14px; padding: 7px 10px; border: 1px solid #bfe4d5; border-radius: 8px; background: #e9f8f2; animation: url-added 3.8s ease-in-out infinite; }
.list-shot-added > span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #3aa37d; color: #fff; font-size: 11px; font-weight: 700; }
.list-shot-added div { display: grid; gap: 1px; }
.list-shot-added b { color: #28765e; font-size: 11px; }
.list-shot-added small { color: #5a8a78; font-size: 9px; }
.list-shot-subhead { margin-top: 2px; }
.list-shot-row { display: flex; align-items: center; gap: 12px; min-height: 58px; margin-bottom: 9px; padding: 10px 13px; border: 1px solid #d9e2eb; border-radius: 10px; background: #fff; }
.list-shot-row > span { display: grid; place-items: center; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; background: #94a3b8; color: #fff; font-size: 10px; font-weight: 700; }
.list-shot-row.done > span { background: #3aa37d; }
.list-shot-row.next > span { background: #315f9f; }
.list-shot-row > div { display: grid; gap: 2px; }
.list-shot-row b { color: #24334c; font-size: 12px; }
.list-shot-row small { color: #8490a1; font-size: 11.5px; }
.list-shot-row.done small { color: #329575; }
.list-shot-row.next small { color: #416fae; }
.list-shot-row.next { animation: list-next-pulse 3.8s ease-in-out infinite; }
.list-shot-row.next i { animation: list-open 3.8s ease-in-out infinite; }
.list-shot-row i { margin-left: auto; padding: 5px 9px; border-radius: 6px; background: #e8eef5; color: #536278; font-size: 11px; font-style: normal; }
.list-shot-stop { margin-top: 15px; padding: 10px; border-radius: 8px; background: #dff5ec; color: #24765c; font-size: 11.5px; font-weight: 700; text-align: center; }
.list-shot-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 12px; }
.list-shot-actions span { display: grid; place-items: center; min-height: 31px; padding: 6px; border-radius: 7px; background: #193059; color: #fff; font-size: 12px; font-weight: 700; text-align: center; }
.list-shot-actions span:last-child { border: 1px solid #cfd9e4; background: #fff; color: #516078; }
.list-shot-stop { animation: list-stop-pulse 3.8s ease-in-out infinite; }
@keyframes list-progress { 0%, 100% { width: 25%; } 45%, 78% { width: 50%; } }
@keyframes list-next-pulse { 0%, 100% { border-color: #d9e2eb; box-shadow: none; } 22%, 72% { border-color: #5f9bdc; box-shadow: 0 0 0 3px rgba(95,155,220,.14); } }
@keyframes list-open { 0%, 18%, 100% { background: #e8eef5; color: #536278; } 25%, 70% { background: #315f9f; color: #fff; } }
@keyframes list-stop-pulse { 0%, 18%, 100% { background: #dff5ec; } 25%, 72% { background: #bfeeda; } }
@keyframes url-focus { 0%, 10%, 100% { border-color: #d9e2eb; } 18%, 68% { border-color: #5f9bdc; box-shadow: 0 0 0 3px rgba(95,155,220,.14); } }
@keyframes url-add { 0%, 22%, 100% { transform: scale(1); } 30%, 65% { transform: scale(1.05); } }
@keyframes url-added { 0%, 28%, 100% { opacity: .35; transform: translateY(4px); } 38%, 82% { opacity: 1; transform: translateY(0); } }

.tracking-shell { padding: 42px; border: 1px solid var(--line-2); border-radius: 22px; background: linear-gradient(145deg, var(--panel), var(--panel-soft)); }
.tracking-intro { display: flex; justify-content: space-between; gap: 30px; align-items: flex-start; }
.tracking-intro > div { max-width: 760px; }
.tracking-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 34px; }
.tracking-flow > div { position: relative; display: grid; gap: 5px; padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.025); }
.tracking-flow > div:not(:last-child)::after { content: "→"; position: absolute; top: 50%; right: -12px; z-index: 2; width: 24px; color: var(--mint); text-align: center; transform: translateY(-50%); }
.tracking-flow span { display: grid; place-items: center; width: 27px; height: 27px; margin-bottom: 5px; border-radius: 8px; background: var(--mint); color: #082019; font-size: 12px; font-weight: 700; }
.tracking-flow b { color: var(--on-dark); font-size: 14px; }
.tracking-flow small { color: var(--text-faint); font-size: 11px; }
.tracking-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 14px; }
.tracking-facts > div { padding: 22px; border: 1px solid var(--line); border-radius: 14px; }
.tracking-facts h3 { margin-bottom: 12px; color: var(--on-dark); font-size: 15px; }
.tracking-facts ul { list-style: none; display: grid; gap: 7px; color: var(--text-mute); font-size: 12.5px; }
.tracking-facts li::before { content: "✓"; margin-right: 8px; color: var(--mint); font-weight: 700; }
.tracking-data-note { margin-top: 12px; color: var(--text-faint); font-size: 11px; line-height: 1.65; }
.tracking-details { margin-top: 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(0,0,0,.12); }
.tracking-details summary { padding: 18px 20px; color: var(--mint-bright); font-size: 13px; font-weight: 700; cursor: pointer; }
.tracking-detail-body { padding: 2px 22px 24px; color: var(--text-mute); font-size: 13px; line-height: 1.8; }
.tracking-detail-body h3 { margin: 20px 0 8px; color: var(--on-dark); font-size: 15px; }
.tracking-detail-body ol { padding-left: 22px; }
.tracking-detail-body li { margin-bottom: 6px; }
.tracking-caution { margin-top: 18px; padding: 15px 17px; border-left: 3px solid var(--mint); background: var(--mint-glow); }
.tracking-caution b { color: var(--on-dark); }

.limit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.limit-card { display: flex; flex-direction: column; gap: 6px; padding: 26px; border: 1px solid #dde4eb; border-radius: 15px; background: #fff; }
.limit-card span { color: #556173; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.limit-card strong { color: #16233a; font-size: 20px; }
.limit-card small { color: #59677a; font-size: 11px; }
.limit-note { margin-top: 16px; color: #556173; font-size: 12px; text-align: center; }
.limit-cta { display: flex; flex-direction: column; align-items: center; gap: 9px; margin-top: 24px; }
.limit-cta .btn { min-width: 250px; justify-content: center; }
.limit-cta small { color: #667386; font-size: 10px; }

.guide-final { position: relative; overflow: hidden; padding: 100px 0; background: linear-gradient(150deg, #0d1a2c, #0b1322); text-align: center; border-top: 1px solid var(--line); }
.guide-final .container { position: relative; z-index: 2; }
.guide-final h2 { max-width: 760px; margin: 0 auto 16px; color: var(--on-dark); font-size: clamp(32px, 4.2vw, 48px); line-height: 1.2; letter-spacing: -1px; }
.guide-final p { margin-bottom: 28px; color: var(--text-mute); }
.guide-final .btn-row { justify-content: center; }

.guide-sticky { display: none; }

@media (max-width: 980px) {
  .guide-hero-inner { grid-template-columns: 1fr; gap: 44px; }
  .route-card { max-width: 660px; }
  .jump-grid { grid-template-columns: repeat(2, 1fr); }
  .guide-step,
  .guide-step-reverse,
  .final-step,
  .list-layout { grid-template-columns: 1fr; }
  .guide-step-reverse .step-copy,
  .guide-step-reverse .step-visual { order: initial; }
  .pitch-example { max-width: none; }
  .list-layout-options-only .list-card { grid-template-columns: 1fr; gap: 22px; }
}

@media (max-width: 768px) {
  .guide-page { padding-bottom: 72px; }
  .guide-page [id] { scroll-margin-top: 70px; }
  .guide-hero { padding: 64px 0 58px; }
  .guide-hero h1 { font-size: 39px; letter-spacing: -.8px; }
  .guide-hero .lead { font-size: 15px; }
  .route-list li > span:last-child { align-items: flex-start; flex-direction: column; gap: 2px; }
  .guide-jump { padding: 18px 0; }
  .jump-grid { grid-template-columns: 1fr 1fr; }
  .jump-grid a { padding: 13px; }
  .guide-section { padding: 76px 0; }
  .guide-heading { margin-bottom: 34px; }
  .before-card { align-items: flex-start; flex-wrap: wrap; padding: 18px; }
  .before-card ul { display: grid; gap: 5px; }
  .before-card a { width: 100%; margin-left: 58px; }
  .first-try-demo { padding: 19px; }
  .first-try-demo-head { align-items: flex-start; flex-direction: column; gap: 5px; }
  .first-try-demo-flow { grid-template-columns: 1fr; gap: 8px; }
  .first-try-demo-flow > em { transform: rotate(90deg); }
  .beginner-map { padding: 20px; }
  .beginner-map-head { align-items: flex-start; flex-direction: column; gap: 8px; }
  .beginner-map-head h3 { font-size: 21px; }
  .beginner-flow { grid-template-columns: 1fr; }
  .beginner-flow li::after { display: none; }
  .guide-step { gap: 26px; padding: 20px; border-radius: 16px; }
  .step-copy h3 { font-size: 23px; }
  .pitch-example { padding: 18px; }
  .trouble-grid,
  .tracking-flow,
  .tracking-facts,
  .limit-grid { grid-template-columns: 1fr; }
  .tracking-flow > div:not(:last-child)::after { content: "↓"; top: auto; right: auto; bottom: -18px; left: 50%; transform: translateX(-50%); }
  .tracking-shell { padding: 25px 19px; }
  .tracking-intro { flex-direction: column; gap: 16px; }
  .manual-send-band { align-items: flex-start; padding: 21px; }
  .guide-final { padding: 76px 0; }
  .guide-sticky {
    display: block;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 70;
    padding: 11px 14px;
    border-top: 1px solid var(--line);
    background: rgba(11,19,34,.96);
    backdrop-filter: blur(10px);
  }
  .guide-sticky a { display: block; padding: 13px; border-radius: 9px; background: var(--mint); color: #082019; font-size: 13px; font-weight: 700; text-align: center; }
}

@media (max-width: 480px) {
  .jump-grid { grid-template-columns: 1fr; }
  .guide-hero h1 { font-size: 34px; }
  .route-head, .route-list { padding-left: 17px; padding-right: 17px; }
  .route-note { margin-left: 17px; margin-right: 17px; }
  .before-card a { margin-left: 0; }
  .beginner-flow { grid-template-columns: 1fr; }
  .beginner-flow li { grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; justify-items: start; column-gap: 14px; padding: 14px 12px 14px 48px; text-align: left; }
  .beginner-flow .flow-number { top: 50%; left: 15px; transform: translateY(-50%); }
  .beginner-flow .flow-icon { grid-row: 1 / 4; width: 44px; height: 44px; margin: 0; }
  .beginner-flow em { margin-top: 7px; }
  .step-visual figcaption { font-size: 10.5px; }
  .ui-shot { min-height: 330px; }
  .ui-browser-body { grid-template-columns: 1fr 125px; min-height: 295px; }
  .ui-form { padding: 16px; }
  .ui-popup { padding: 12px 8px; }
  .list-shot { min-height: 390px; padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .option-mock *,
  .beginner-flow li,
  .settings-shot *,
  .browser-shot *,
  .review-send-mock *,
  .first-try-demo-step,
  .list-shot-progress span,
  .list-shot-row.next,
  .list-shot-row.next i,
  .list-shot-stop { animation: none !important; }
  .url-mock-field b { width: 142px; }
  .url-mock-result,
  .csv-mock-count,
  .csv-mock-rows i,
  .sheet-mock-sync { opacity: 1; transform: none; }
  .csv-mock-progress span { width: 100%; }
  .settings-shot .ui-fields i,
  .settings-shot .ui-textarea,
  .browser-shot .ui-form label i { color: #354259; background: #fff; }
  .profile-saved { opacity: 1; transform: none; }
  .mock-cursor { display: none; }
}