/* learn-custom.css
   Blackboard & chalk visual identity overrides for the learn.threedive.ai page.
   Must be loaded AFTER learn.css so these :root custom-property overrides win.
   Do not edit learn.css directly (generated Tailwind bundle) — everything here
   works by overriding the CSS custom properties learn.css's utility classes
   already reference (e.g. .text-emerald-700{color:var(--color-emerald-700)}).
*/

/* A. Blackboard/chalk color tokens.
   Hex values below were adjusted from the initial design sketch to clear
   WCAG AA (4.5:1) for every actual text/background pairing on this page:
   emerald/teal-700 darkened to #26543F, emerald-500 brightened to #5B9C7D.
   teal-* is intentionally aliased to the same values as emerald-* so the
   page reads as one cohesive "blackboard green" rather than two hues. */
:root {
  --color-slate-950: #14251f;

  --color-emerald-700: #26543f;
  --color-emerald-800: #1e4433;
  --color-emerald-900: #163524;
  --color-emerald-950: #14251f;
  --color-emerald-500: #5b9c7d;
  --color-emerald-400: #6fa689;
  --color-emerald-300: #9fc7ae;
  --color-emerald-200: #c3dfcc;
  --color-emerald-50: #f6f5ef;

  --color-teal-50: #f6f5ef;
  --color-teal-700: #26543f;
  --color-teal-800: #1e4433;
  --color-teal-900: #163524;
  --color-teal-950: #14251f;
}

/* B. Mobile demo frame — taller on phones, 16:9 from tablet up. */
.demo-frame {
  aspect-ratio: 3 / 4;
}
@media (min-width: 640px) {
  .demo-frame {
    aspect-ratio: 16 / 9;
  }
}

/* C. Chalk-stroke card dividers, replacing the plain solid hairline rule. */
.border-t-2.border-emerald-700,
.border-t-2.border-teal-700 {
  border-top: none;
  border-top-width: 3px;
  border-style: solid;
  border-image-slice: 1;
  border-image-source: repeating-linear-gradient(
    to right,
    var(--color-emerald-700) 0 7px,
    transparent 7px 11px
  );
}

/* D. Kicker chalk-underline signature motion. */
.kicker {
  position: relative;
  display: inline-block;
}
.kicker-underline {
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 64px;
  height: 8px;
  overflow: visible;
  pointer-events: none;
}
.kicker-underline path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.6s ease-out;
}
.kicker.chalk-drawn .kicker-underline path {
  stroke-dashoffset: 0;
}
@media (prefers-reduced-motion: reduce) {
  .kicker-underline path {
    transition: none;
    stroke-dashoffset: 0;
  }
}

/* F. Demo tab switcher — plain buttons/classes toggled via JS, since aria-selected:
   variants and several responsive utility combos used below are not present in the
   generated learn.css bundle (it is a static export, not a live Tailwind build). */
.demo-tab {
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 0.375rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #fff;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.demo-tab:hover {
  background: rgba(255, 255, 255, 0.15);
}
.demo-tab.is-active {
  background: #fff;
  color: var(--color-slate-950);
}

/* G. Demo layout — iframe stacks with the QR panel on larger screens; the QR panel
   is desktop-only and the "今すぐデモを開く" button is mobile-only (same 640px
   breakpoint as the .demo-frame aspect-ratio rule above). */
.demo-qr-panel {
  display: none;
}
@media (min-width: 640px) {
  .demo-layout {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
  }
  .demo-layout .demo-frame {
    flex: 1 1 auto;
    min-width: 0;
  }
  .demo-qr-panel {
    display: flex;
    flex: 0 0 auto;
    width: 9rem;
    flex-direction: column;
    align-items: center;
    background: #fff;
    border-radius: 0.5rem;
    padding: 0.75rem;
  }
  .demo-qr-panel svg {
    width: 100%;
    height: auto;
  }
  .demo-mobile-cta {
    display: none;
  }
}

/* H. FAQ accordion — chalk-dash dividers (same border-image technique as the
   feature-card dividers above) tie the list to the rest of the brand instead
   of a generic hairline; divide-border isn't in the generated learn.css
   bundle anyway, so this is handled entirely with custom rules. */
.faq-list {
  border-top: 3px solid transparent;
  border-image-slice: 1;
  border-image-source: repeating-linear-gradient(to right, var(--color-emerald-700) 0 7px, transparent 7px 11px);
}
.faq-item {
  border-bottom: 3px solid transparent;
  border-image-slice: 1;
  border-image-source: repeating-linear-gradient(to right, var(--color-emerald-700) 0 7px, transparent 7px 11px);
}
.faq-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: 1.125rem 0.25rem;
  list-style: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.faq-summary::-webkit-details-marker {
  display: none;
}
.faq-summary:hover {
  background: rgba(38, 84, 63, 0.06);
}
.faq-q {
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--color-slate-950);
  transition: color 0.15s ease;
}
.faq-chevron {
  color: var(--color-emerald-700);
  transition: transform 0.2s ease;
}
.faq-item[open] .faq-q {
  color: var(--color-emerald-700);
}
.faq-item[open] .faq-chevron {
  transform: rotate(180deg);
}
.faq-answer {
  margin: 0 0.25rem 1.25rem;
  padding-left: 1rem;
  border-left: 2px solid var(--color-emerald-300);
  line-height: 1.75;
  color: var(--muted-foreground);
}
@media (prefers-reduced-motion: reduce) {
  .faq-summary,
  .faq-q,
  .faq-chevron {
    transition: none;
  }
}

/* I. Wrap-safe CTA override — "学校・法人での導入を相談する" is long enough to
   overflow its own button once the pricing cards drop to ~170px wide (the
   md 4-column breakpoint), since the shared button classes use a fixed
   height + whitespace-nowrap. Loaded after learn.css so these win. */
.cta-wrap-safe {
  height: auto;
  min-height: 2.5rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  white-space: normal;
  text-align: center;
  line-height: 1.3;
}

/* J. Chalk-rule divider for the post-flow option panel — a hand-drawn dash
   (same repeating-gradient technique as the chalk-stroke card dividers above)
   instead of a plain hairline, marking the shift from "how to start" to
   "or skip ahead: have us build it for you". */
.chalk-rule {
  height: 3px;
  background-image: repeating-linear-gradient(to right, rgba(255, 255, 255, 0.45) 0 7px, transparent 7px 11px);
}

/* E. Typography. */
h1,
h2,
h3,
body {
  font-family: "Zen Kaku Gothic New", var(--font-sans);
}
h1,
h2 {
  font-weight: 700;
}
h3 {
  font-weight: 500;
}
body {
  font-weight: 400;
}
.num {
  font-family: "Space Grotesk", "Zen Kaku Gothic New", var(--font-sans);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}