/* Motif LP — refinement layer (2026-11-05).
   上品・ミニマル: one Japanese sans throughout, one button language, quiet section headings, a calmer spectrum.
   Loaded after layout.css and color-design.css; overrides only. */

:root {
  --jp: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif;
  --display: var(--jp);
  --ink: #f2f3f5;
  --muted: #9aa3b2;
  --faint: #6f7a8c;
  --line: #ffffff14;
  --radius: 10px;
}

body { font-family: var(--jp); font-feature-settings: "palt"; letter-spacing: .02em; line-height: 1.85; }
h1, h2, h3 { font-family: var(--jp); font-style: normal; font-feature-settings: "palt"; text-wrap: balance; }
h2 { font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; letter-spacing: .03em; line-height: 1.45; }
h3 { letter-spacing: .02em; }
p { line-height: 1.9; }
a { text-underline-offset: 3px; }

/* ---- buttons: one language — soft white solid, quiet outline */
.button, .nav-download, .glass-download {
  min-height: 46px; padding: 0 24px; border-radius: var(--radius);
  font-size: 14px; font-weight: 600; letter-spacing: .04em; text-decoration: none;
  transition: background .2s, border-color .2s, transform .2s var(--ease);
}
.button { color: var(--ink); background: #ffffff0a; border: 1px solid #ffffff26; box-shadow: none; }
.button:hover { transform: translateY(-1px); background: #ffffff14; border-color: #ffffff40; box-shadow: none; }
.button.primary, .feature-footer .button.primary { color: #0b0c10; background: #f2f3f5; border-color: #f2f3f5; box-shadow: none; }
.button.primary:hover { background: #fff; border-color: #fff; box-shadow: 0 8px 28px #0000004d; }
.nav-download { min-height: 36px; padding: 0 16px; font-size: 13px; color: #0b0c10; background: #f2f3f5; border: 1px solid #f2f3f5; }

/* ---- header */
.site-header { background: #060914cc; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); position: sticky; top: 0; z-index: 20; }
.nav nav { gap: 36px; }
.nav nav a { font-size: 13px; color: #aab3c2; letter-spacing: .06em; white-space: nowrap; }

/* ---- hero: calmer spectrum, centred Japanese headline */
.hero { padding-top: 112px; }
.hero-spectrum { opacity: .62; }
.hero-copy { max-width: 880px; }
.hero-copy h1 {
  margin-top: 0; font-size: clamp(34px, 4.2vw, 56px); font-weight: 600; line-height: 1.32; letter-spacing: .04em;
  color: #fff; text-shadow: 0 2px 24px #06091480;
}
.hero-copy h1 span { display: inline; padding: 0; font-style: normal; color: #fff; }
.intro { max-width: 560px; margin-top: 28px; font-size: 15px; line-height: 2; color: #e6ecf3; text-shadow: 0 1px 12px #060914b3; }
.actions { margin-top: 36px; gap: 12px; }
.actions .button:not(.primary) { background: #06091499; }
.hero-copy .micro { margin-top: 18px; padding: 0; background: none; border: 0; font-size: 12px; letter-spacing: .08em; color: #c9d3e0; text-shadow: 0 1px 10px #060914; }

.demo { margin-top: 84px; }
.placeholder { border: 1px dashed #ffffff24; border-radius: 14px; background: #0b111dcc; color: var(--faint); gap: 10px; }
.placeholder strong { font-size: 15px; font-weight: 600; letter-spacing: .08em; color: #cfd6e0; }
.placeholder > span:not(.dimension) { font-size: 12px; letter-spacing: .04em; }
.hero-media strong { font-size: 17px; font-family: var(--jp); }
.placeholder .dimension { font-size: 11px; letter-spacing: .06em; color: var(--faint); }

.reassurance { list-style: none; margin: 40px 0 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.reassurance li { display: flex; flex-direction: column; gap: 4px; padding: 6px 28px; text-align: center; }
.reassurance li + li { border-left: 1px solid var(--line); }
.reassurance strong { font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: .04em; }
.reassurance span { font-size: 12px; color: var(--muted); }

/* ---- section rhythm: one heading style, no numbered labels */
.section, .feature-section { padding-block: 128px; }
.section-heading { margin-bottom: 56px; }
.section-heading h2 { margin-top: 0; }
.section-heading > p:last-child { margin-top: 14px; font-size: 14px; color: var(--muted); }
.band { background: transparent; border: 0; }

/* ---- features (expanding cards) */
.feature-heading h2 { font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; letter-spacing: .03em; line-height: 1.45; }
.feature-heading h2 span { display: block; margin-top: 10px; font-size: 14px; font-weight: 400; letter-spacing: .04em; color: var(--muted); }
.feature-deck { margin-top: 48px; }
.feature-card { border-radius: 16px; border-color: #ffffff12; background: #0a101b; }
.feature-card::before { display: none; }
.feature-scene { border: 1px dashed #ffffff22; background: #0e1522; color: var(--muted); }
.feature-scene strong { font-size: 13px; font-weight: 600; letter-spacing: .1em; color: #cfd6e0; }
.feature-scene > span { font-size: 12px; }
.feature-card-copy { padding-inline: 24px; }
.feature-card-copy h3 { font-size: 16px; font-weight: 600; letter-spacing: .04em; }
.feature-card-copy p { margin-top: 8px; font-size: 13px; line-height: 1.85; color: var(--muted); white-space: normal; }

/* ---- what Motif does: quieter glass grid + four-step flow */
.glass-section { padding-block: 128px; }
.glass-section .section-heading h2 { font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; letter-spacing: .03em; }
.flow { list-style: none; margin: 22px 0 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 0; counter-reset: step; }
.flow li { counter-increment: step; display: inline-flex; align-items: center; font-size: 13px; letter-spacing: .06em; color: var(--muted); }
.flow li::before { content: counter(step); display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 8px; border: 1px solid #ffffff2e; border-radius: 50%; font-size: 10px; color: var(--ink); }
.flow li + li::before { margin-left: 0; }
.flow li + li { margin-left: 22px; }
.flow li:not(:last-child)::after { content: ""; width: 22px; height: 1px; margin-left: 22px; background: #ffffff24; }
.glass-grid { gap: 14px; }
.glass-card { min-height: 0; padding: 26px 24px 28px; border-radius: 14px; }
.glass-card h3 { font-size: 15px; font-weight: 600; letter-spacing: .04em; }
.glass-card p { margin-top: 10px; font-size: 13px; line-height: 1.85; color: #aeb8c7; }

/* ---- examples */
.examples { gap: 28px; }
.example-media { aspect-ratio: 16 / 10; }
.examples h3 { margin-top: 22px; font-size: 16px; font-weight: 600; letter-spacing: .04em; }
.examples p { margin-top: 6px; font-size: 13px; color: var(--muted); }

/* ---- pricing */
.pricing-layout { gap: 72px; max-width: 960px; align-items: start; }
.plan { padding: 36px; border-radius: 16px; border: 1px solid #ffffff1c; background: linear-gradient(180deg, #ffffff08, #ffffff03); box-shadow: none; }
.plan::before { left: 36px; right: 36px; opacity: .7; }
.plan-name { font-size: 13px; font-weight: 600; letter-spacing: .1em; color: var(--ink); }
.plan h3 { margin-top: 14px; font-family: var(--jp); font-size: 40px; font-weight: 600; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.plan h3 small { font-family: var(--jp); font-size: 13px; font-weight: 400; color: var(--muted); }
.plan-trial { margin-top: 6px; font-size: 13px; color: #a9c6ff; }
.plan ul { list-style: none; padding: 20px 0 0; margin: 22px 0 28px; border-top: 1px solid var(--line); font-size: 13px; color: #c3cad5; }
.plan li { position: relative; padding-left: 22px; }
.plan li + li { margin-top: 10px; }
.plan li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 9px; height: 5px; border-left: 1.5px solid #ffffff80; border-bottom: 1.5px solid #ffffff80; transform: rotate(-45deg); }
.plan .micro { margin-top: 14px; font-size: 12px; text-align: center; color: var(--faint); }
.plan .micro a { color: var(--muted); }
.requirements h3 { font-size: 15px; font-weight: 600; letter-spacing: .06em; }
.requirements dl { margin: 18px 0 0; }
.requirements dl > div { padding: 18px 0; border-top: 1px solid var(--line); }
dt { font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--ink); }
dd { margin: 6px 0 0; font-size: 13px; line-height: 1.85; color: var(--muted); }

/* ---- FAQ */
.faq-layout { gap: 96px; }
.faq-layout .section-heading p a { color: var(--ink); }
.faq-list details { border-color: var(--line); }
.faq-list details:first-child { border-color: var(--line); }
.faq-list summary { min-height: 0; padding: 22px 36px 22px 0; font-size: 14px; font-weight: 500; letter-spacing: .03em; color: var(--ink); }
.faq-list summary::after { top: 19px; color: var(--faint); }
.faq-list summary:hover, .faq-list details[open] summary { color: #fff; }
.faq-list details[open] { border-bottom-color: var(--line); }
.faq-list details p { padding: 0 36px 24px 0; font-size: 13px; line-height: 1.95; color: var(--muted); }
.faq-list details p a { color: var(--ink); }

/* ---- closing */
.closing { padding-block: 136px; }
.closing h2 { margin-top: 0; font-size: clamp(28px, 3vw, 40px); font-weight: 600; letter-spacing: .04em; }
.closing p:not(.eyebrow) { margin-top: 16px; font-size: 14px; color: var(--muted); }
.closing .button { margin-top: 32px; }
.closing .micro { margin-top: 14px; font-size: 11px; color: var(--faint); letter-spacing: .06em; }

/* ---- footer */
.footer { padding-block: 64px 36px; }
.footer .eyebrow { font-size: 11px; letter-spacing: .1em; text-transform: none; color: var(--ink); }
.footer nav a { font-size: 12px; color: var(--muted); }
.footer nav a:hover { color: var(--ink); text-decoration: none; }
.footer > div .micro { font-size: 12px; color: var(--faint); }
.footer-note { font-size: 11px; color: var(--faint); border-color: var(--line); }

/* ---- small screens */
@media (max-width: 900px) {
  .faq-layout { gap: 24px; }
}
@media (max-width: 680px) {
  .nav nav { gap: 18px; justify-content: space-between; }
  .nav nav a { font-size: 12px; letter-spacing: .02em; }
  .hero { padding-top: 64px; }
  .hero-copy h1 { font-size: clamp(26px, 7.4vw, 34px); line-height: 1.45; letter-spacing: .03em; }
  .intro { font-size: 13px; }
  .reassurance { grid-template-columns: 1fr; gap: 14px; }
  .reassurance li + li { border-left: 0; border-top: 1px solid var(--line); padding-top: 18px; }
  .section, .feature-section, .glass-section { padding-block: 80px; }
  .flow { flex-direction: column; align-items: center; gap: 10px; }
  .flow li + li { margin-left: 0; }
  .flow li:not(:last-child)::after { display: none; }
  .plan h3 { font-size: 34px; }
  .closing { padding-block: 88px; }
}

/* ---- fixes after the first visual pass */
.demo::before { display: none; }
.hero-media { border-radius: 16px; }
.placeholder .dimension { bottom: 18px; }
.feature-heading { text-align: center; }
.feature-stage { background: none; }
.feature-stage::after { display: none; }
.feature-card:hover, .feature-card:focus-within { border-color: #ffffff26; }
.feature-section { padding-block: 128px 64px; }
.glass-section { padding-block: 96px 128px; }
.glass-section::after { opacity: .6; }
.glass-card { border-color: #ffffff1f; }
.closing p.micro { margin-top: 14px; font-size: 11px; color: var(--faint); letter-spacing: .06em; }
.faq-layout .section-heading p { font-size: 13px; }
.nb { white-space: nowrap; }

/* ---- hero, Ponder-style: left-aligned, white headline + grey second line */
.hero-copy { text-align: left; margin-inline: 0; max-width: 960px; }
.hero-copy h1 { margin-top: 0; font-size: clamp(32px, 3.6vw, 50px); line-height: 1.35; letter-spacing: .02em; font-weight: 600; text-wrap: initial; }
.hero-sub { margin: 10px 0 0; font-size: clamp(22px, 2.5vw, 34px); line-height: 1.5; font-weight: 600; letter-spacing: .02em; color: #ffffff80; font-family: var(--jp); text-shadow: 0 1px 14px #06091499; }
.hero .actions { justify-content: flex-start; margin-top: 40px; }
.hero .demo { margin-top: 72px; }
@media (max-width: 680px) {
  .hero-copy h1 { font-size: clamp(25px, 7vw, 32px); line-height: 1.45; }
  .hero-sub { font-size: clamp(17px, 4.8vw, 22px); }
  .hero .actions { margin-top: 28px; }
  .hero .demo { margin-top: 48px; }
}

/* ---- hero, tightened (2026-11-05) */
.hero-copy h1 { font-size: clamp(30px, 3.3vw, 46px); line-height: 1.25; letter-spacing: .01em; }
.hero-sub { margin-top: 14px; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.75; font-weight: 500; letter-spacing: .04em; color: #ffffff8c; }
.hero .actions { margin-top: 28px; gap: 10px; }
.hero .demo { margin-top: 56px; }
@media (max-width: 680px) {
  .hero-copy h1 { font-size: clamp(25px, 7vw, 30px); line-height: 1.4; }
  .hero-sub { margin-top: 12px; font-size: 14px; }
  .hero .actions { margin-top: 24px; }
  .hero .demo { margin-top: 40px; }
}

/* ---- Ponder proportions: 9% side margins, wide demo, roomier pill buttons */
.container { width: min(1560px, 82%); }
.hero { padding-top: 136px; }
.button, .nav-download, .glass-download { border-radius: 999px; }
.hero .button { min-height: 50px; padding: 0 30px; font-size: 15px; }
.hero .actions { gap: 12px; margin-top: 32px; }
.hero .demo { margin-top: 64px; }
@media (max-width: 680px) {
  .container { width: calc(100% - 40px); }
  .hero { padding-top: 64px; }
  .hero .button { min-height: 46px; padding: 0 24px; font-size: 14px; }
  .hero .demo { margin-top: 44px; }
}
.nav.container { width: calc(100% - clamp(40px, 5.4vw, 96px)); }
.feature-shell { width: min(1560px, 82%); }
@media (max-width: 680px) {
  .nav.container, .feature-shell { width: calc(100% - 40px); }
}
/* hero sits higher (2026-11-05) */
.hero { padding-top: 92px; }
.hero .demo { margin-top: 56px; }
@media (max-width: 680px) { .hero { padding-top: 48px; } .hero .demo { margin-top: 40px; } }

/* ---- atmosphere below the hero (2026-11-05)
   Same palette as the hero's spectrum (navy #03102c, blue #075c96, cyan #39aecb, peach #f39174), but as a few
   large, very soft light washes rather than the spectrum itself. Sparse on purpose: one quiet light per section,
   alternating sides, and plain dark around the FAQ. Every wash fades out inside its own section. */
.feature-section, .glass-section, #pricing, .closing { position: relative; isolation: isolate; background: transparent; }
.feature-section::before, .glass-section::before, #pricing::before, .closing::before {
  content: ""; display: block; position: absolute; inset: 0; z-index: -1; pointer-events: none; transform: none; filter: none; width: auto; height: auto; left: 0; top: 0; opacity: 1; }
.glass-section::after, .closing::after { display: none; }

/* features: the hero's cool light settling, from the top right */
.feature-section::before { background: radial-gradient(ellipse 55% 45% at 85% 8%, #075c9624, transparent 70%); }
/* how: blue on the left, a trace of the hero's warmth on the right */
.glass-section::before { background:
  radial-gradient(ellipse 45% 55% at 0% 55%, #075c962e, transparent 70%),
  radial-gradient(ellipse 35% 45% at 100% 70%, #f391740f, transparent 70%); }
/* pricing: a cyan glow behind the plan card */
#pricing::before { background: radial-gradient(ellipse 32% 42% at 32% 62%, #39aecb17, transparent 72%); }
/* closing: the hero's horizon, as light rather than bars */
.closing { padding-block: 160px; }
.closing::before { background:
  radial-gradient(ellipse 55% 55% at 50% 100%, #f391741f, transparent 65%),
  radial-gradient(ellipse 80% 75% at 50% 100%, #39aecb1c, transparent 70%),
  radial-gradient(ellipse 100% 90% at 50% 100%, #075c9626, transparent 75%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 85%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 85%, transparent); }
.closing p:not(.eyebrow) { color: #b9c4d3; }

/* the hero's slow breathing stays in the hero */
@keyframes spectrum-breathe { from { transform: scaleY(1); } to { transform: scaleY(1.045); } }
.hero-spectrum .spectrum-candles { transform-origin: 50% 100%; animation: spectrum-breathe 9s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { .hero-spectrum .spectrum-candles { animation: none; } }
@media (max-width: 680px) { .closing { padding-block: 104px; } }
/* washes, tuned after viewing */
.feature-section::before { background: radial-gradient(ellipse 50% 45% at 88% 10%, #075c963d, transparent 70%); }
.glass-section::before { background:
  radial-gradient(ellipse 45% 55% at 0% 55%, #075c963d, transparent 70%),
  radial-gradient(ellipse 35% 45% at 100% 72%, #f391741a, transparent 70%); }
#pricing::before { background: radial-gradient(ellipse 30% 40% at 32% 62%, #39aecb26, transparent 72%); }
.closing::before { background:
  radial-gradient(ellipse 38% 40% at 50% 100%, #f391742e, transparent 70%),
  radial-gradient(ellipse 65% 65% at 50% 100%, #39aecb26, transparent 70%),
  radial-gradient(ellipse 100% 90% at 50% 100%, #075c9638, transparent 75%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 35%, #000 70%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 35%, #000 70%, transparent); }
/* features wash: keep it clear of the section's top edge (it showed as a hard line) */
.feature-section::before { background: radial-gradient(ellipse 40% 32% at 90% 40%, #075c9633, transparent 70%); }
/* hero → page: no hard line where the spectrum ends, no dark halo under the demo frame */
.hero::before, .hero-spectrum {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%); }
.hero::before { background: var(--bg); }
.hero-media { box-shadow: inset 0 1px 0 #e9f0ff14; }
/* features: more colour — the hero's blue, cyan and peach as three soft lights behind the heading and cards */
.feature-section::before { background:
  radial-gradient(ellipse 42% 36% at 18% 48%, #075c9659, transparent 70%),
  radial-gradient(ellipse 36% 34% at 82% 58%, #39aecb33, transparent 70%),
  radial-gradient(ellipse 30% 26% at 55% 74%, #f3917426, transparent 70%); }
.feature-section::before { background:
  radial-gradient(ellipse 34% 16% at 50% 24%, #39aecb2e, transparent 72%),
  radial-gradient(ellipse 30% 40% at 4% 58%, #075c968c, transparent 70%),
  radial-gradient(ellipse 28% 38% at 97% 62%, #39aecb59, transparent 70%),
  radial-gradient(ellipse 40% 22% at 60% 92%, #f3917433, transparent 70%); }
.glass-section::before { background:
  radial-gradient(ellipse 30% 45% at 2% 55%, #075c9680, transparent 70%),
  radial-gradient(ellipse 28% 40% at 98% 68%, #f3917433, transparent 70%),
  radial-gradient(ellipse 34% 14% at 50% 18%, #39aecb26, transparent 72%); }
#pricing::before { background:
  radial-gradient(ellipse 30% 40% at 32% 62%, #39aecb40, transparent 72%),
  radial-gradient(ellipse 24% 30% at 70% 80%, #f3917420, transparent 72%); }
.feature-section::before { background:
  radial-gradient(ellipse 34% 16% at 50% 24%, #39aecb2e, transparent 72%),
  radial-gradient(ellipse 30% 36% at 4% 56%, #075c968c, transparent 70%),
  radial-gradient(ellipse 28% 34% at 97% 60%, #39aecb59, transparent 70%),
  radial-gradient(ellipse 36% 16% at 58% 78%, #f391742e, transparent 70%); }
.glass-section::before { background:
  radial-gradient(ellipse 30% 40% at 2% 52%, #075c9680, transparent 70%),
  radial-gradient(ellipse 28% 34% at 98% 62%, #f3917433, transparent 70%),
  radial-gradient(ellipse 34% 14% at 50% 20%, #39aecb26, transparent 72%); }

/* ==== Colour, redesigned (2026-11-05) ================================================================
   The scattered background glows are gone. The hero's spectrum becomes a motif that lives on the
   objects instead: every media frame is a small horizon of the hero's colours (navy → blue → cyan →
   peach, low and soft), and every card carries the hero's hairline across its top edge, as the plan
   card already did. Section backgrounds stay plain dark; only the closing returns to a full horizon.
   ===================================================================================================== */
.feature-section::before, .glass-section::before, #pricing::before { display: none; }

/* the horizon, shared by every media frame */
:root { --horizon:
  radial-gradient(ellipse 70% 55% at 50% 118%, #f3917438 0%, transparent 70%),
  radial-gradient(ellipse 95% 80% at 50% 122%, #39aecb2e 0%, transparent 70%),
  radial-gradient(ellipse 130% 110% at 50% 128%, #075c9640 0%, transparent 72%),
  linear-gradient(180deg, #070c18, #0a1222); }
.feature-stage { background: var(--horizon); }
.feature-scene strong { color: #e8eef6; }
.feature-scene span { color: #9fb0c4; }

/* the hairline: the hero's colours across the top edge of every card */
.feature-card, .glass-card { position: relative; }
.feature-card::after, .glass-card::after {
  content: ""; position: absolute; z-index: 2; top: -1px; left: 24px; right: 24px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, #6699eb99, #96d7d9b3, #efb48699, transparent); opacity: .55;
  transition: opacity .3s ease; }
.feature-card:hover::after, .feature-card:focus-within::after, .glass-card:hover::after { opacity: 1; }
.feature-card { background: #0a101b; border-color: #ffffff10; }

/* how: quiet glass cards on plain dark, no tints competing with the hairline */
.glass-card { background: linear-gradient(180deg, #ffffff07, #ffffff02); border-color: #ffffff14; box-shadow: none; }
.glass-card::before { display: none; }
@media (prefers-reduced-transparency: no-preference) { .glass-card { -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* the plan card wears the same horizon as the media frames, faintly */
.plan { background: radial-gradient(ellipse 90% 45% at 50% 108%, #39aecb1f, transparent 70%), radial-gradient(ellipse 60% 30% at 50% 106%, #f3917414, transparent 70%), linear-gradient(180deg, #ffffff07, #ffffff02); }
/* the horizon belongs on the media frame itself, not the strip around it */
.feature-stage { background: none; }
.feature-scene { background: var(--horizon); border: 1px solid #ffffff12; border-radius: 10px; }
.feature-scene {
  background:
    radial-gradient(ellipse 55% 30% at 50% 74%, #f3917430 0%, transparent 70%),
    radial-gradient(ellipse 85% 50% at 50% 76%, #39aecb2b 0%, transparent 70%),
    radial-gradient(ellipse 130% 80% at 50% 82%, #075c963d 0%, transparent 72%),
    #0a1120;
  border: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 86%);
  mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 86%); }

/* ==== Hero closes by reversing itself; the rest of the page is plain dark (2026-11-05) ===============
   The spectrum runs dark → blue → white → orange as you scroll down. Under its orange it is mirrored
   (-webkit-box-reflect), so it runs back orange → white → blue → dark, and the page continues in the
   plain night. No colour below that. */
.hero::before { display: none; }
.hero-spectrum {
  -webkit-mask-image: none; mask-image: none;
  -webkit-box-reflect: below -200px linear-gradient(to bottom, transparent 0%, transparent 30%, #000 100%);
}
/* everything below the hero: dark, no washes, no coloured details */
.feature-section::before, .glass-section::before, #pricing::before, .closing::before, .closing::after { display: none; }
.feature-card::after, .glass-card::after { display: none; }
.feature-stage { background: none; }
.feature-scene { background: #0d1422; border: 1px solid #ffffff10; -webkit-mask-image: none; mask-image: none; }
.plan { background: linear-gradient(180deg, #ffffff07, #ffffff02); }
.closing { padding-block: 136px; }
.hero-spectrum { -webkit-box-reflect: below -200px linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%); }

/* ==== the hero's light, mirrored (replaces the box-reflect attempt) ================================
   H = spectrum box height. The original is cut at the warm/white seam (74% of H), before its flat
   orange slab. The mirror is the same box flipped and squashed to 60% height, hinged on that seam,
   so it runs back warm → white → cyan → blue → dark over ~0.44 H and fades into the page. */
.hero { --H: calc(var(--spectrum-height) + 180px); }
.hero-spectrum { -webkit-box-reflect: none; clip-path: inset(0 0 26% 0); }
.hero-spectrum--mirror {
  clip-path: inset(0 0 26% 0);
  transform-origin: 50% 0;
  transform: translateX(-50%) translateY(calc(var(--H) * 1.184)) scaleY(-0.6);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 34%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 34%);
}
.hero-spectrum--mirror .spectrum-candles { animation-delay: -4.5s; }
/* hinge: overlap the halves a few pixels and soften the original's cut so no seam line shows */
.hero-spectrum--mirror { transform: translateX(-50%) translateY(calc(var(--H) * 1.184 - 8px)) scaleY(-0.6); }
.hero-spectrum:not(.hero-spectrum--mirror) { clip-path: inset(0 0 calc(26% - 4px) 0);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(74% - 14px), transparent calc(74% + 4px));
  mask-image: linear-gradient(to bottom, #000 calc(74% - 14px), transparent calc(74% + 4px)); }
.hero-spectrum:not(.hero-spectrum--mirror) { -webkit-mask-image: none; mask-image: none; clip-path: inset(0 0 26% 0); }
@media (max-width: 680px) {
  /* shorter hero: the mirror closes faster */
  .hero-spectrum--mirror { transform: translateX(-50%) translateY(calc(var(--H) * 0.999 - 8px)) scaleY(-0.35); }
}
.hero-light { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .62; }
.hero-light .hero-spectrum { opacity: 1; z-index: auto; }
@media (max-width: 680px) {
  .hero-spectrum:not(.hero-spectrum--mirror), .hero-spectrum--mirror { clip-path: inset(0 0 34% 0); }
  .hero-spectrum--mirror { transform: translateX(-50%) translateY(calc(var(--H) * 0.792 - 6px)) scaleY(-0.2); }
}
/* longer fade: the mirrored half at full height (hinge at 74% of H → top = 0.74·H·(1+s)) */
.hero-spectrum--mirror { transform: translateX(-50%) translateY(calc(var(--H) * 1.48 - 8px)) scaleY(-1);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 60%); mask-image: linear-gradient(to bottom, transparent 0%, #000 60%); }
@media (max-width: 680px) {
  .hero-spectrum--mirror { transform: translateX(-50%) translateY(calc(var(--H) * 0.891 - 6px)) scaleY(-0.35); }
}
/* hinge without a crease: the original runs 60px past the hinge, fully opaque; the mirror lies on top and
   cross-fades in over those ±60px, so the colours turn round in a smooth curve instead of a sharp fold.
   Longer: the mirror is stretched 1.4× (hinge h = 0.74·H, top = h·(1 + s)). */
.hero-spectrum:not(.hero-spectrum--mirror) { clip-path: inset(0 0 calc(26% - 60px) 0); -webkit-mask-image: none; mask-image: none; }
.hero-spectrum--mirror {
  clip-path: inset(0 0 calc(26% - 60px) 0);
  transform: translateX(-50%) translateY(calc(var(--H) * 1.776)) scaleY(-1.4);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 62%, #000 calc(74% - 60px), transparent calc(74% + 60px));
  mask-image: linear-gradient(to bottom, transparent 0%, #000 62%, #000 calc(74% - 60px), transparent calc(74% + 60px)); }
@media (max-width: 680px) {
  .hero-spectrum:not(.hero-spectrum--mirror) { clip-path: inset(0 0 calc(34% - 40px) 0); }
  .hero-spectrum--mirror {
    clip-path: inset(0 0 calc(34% - 40px) 0);
    transform: translateX(-50%) translateY(calc(var(--H) * 0.99)) scaleY(-0.5);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 55%, #000 calc(66% - 40px), transparent calc(66% + 40px));
    mask-image: linear-gradient(to bottom, transparent 0%, #000 55%, #000 calc(66% - 40px), transparent calc(66% + 40px)); }
}
/* the original must stay opaque until the stretched mirror is fully opaque (±40px × 1.4 = ±56px on screen) */
.hero-spectrum:not(.hero-spectrum--mirror) { clip-path: inset(0 0 calc(26% - 80px) 0); }
.hero-spectrum--mirror {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 62%, #000 calc(74% - 40px), transparent calc(74% + 40px));
  mask-image: linear-gradient(to bottom, transparent 0%, #000 62%, #000 calc(74% - 40px), transparent calc(74% + 40px)); }
@media (max-width: 680px) {
  .hero-spectrum:not(.hero-spectrum--mirror) { clip-path: inset(0 0 calc(34% - 40px) 0); }
  .hero-spectrum--mirror {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 55%, #000 calc(66% - 60px), transparent calc(66% + 60px));
    mask-image: linear-gradient(to bottom, transparent 0%, #000 55%, #000 calc(66% - 60px), transparent calc(66% + 60px)); }
}
@media (max-width: 680px) {
  /* the mirror must be fully transparent before its clip edge (66% + 40px) */
  .hero-spectrum--mirror {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 55%, #000 calc(66% - 70px), transparent calc(66% + 30px));
    mask-image: linear-gradient(to bottom, transparent 0%, #000 55%, #000 calc(66% - 70px), transparent calc(66% + 30px)); }
}
/* no hard clip edge anywhere: the original fades out softly well below the hinge (under the opaque mirror),
   and both halves breathe in phase so the turn always lines up */
.hero-spectrum:not(.hero-spectrum--mirror) { clip-path: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(74% + 40px), transparent calc(74% + 220px));
  mask-image: linear-gradient(to bottom, #000 calc(74% + 40px), transparent calc(74% + 220px)); }
.hero-spectrum--mirror { clip-path: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 62%, #000 calc(74% - 30px), transparent calc(74% + 10px));
  mask-image: linear-gradient(to bottom, transparent 0%, #000 62%, #000 calc(74% - 30px), transparent calc(74% + 10px)); }
.hero-spectrum--mirror .spectrum-candles { animation-delay: 0s; }
@media (max-width: 680px) {
  .hero-spectrum:not(.hero-spectrum--mirror) { clip-path: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(66% + 30px), transparent calc(66% + 160px));
    mask-image: linear-gradient(to bottom, #000 calc(66% + 30px), transparent calc(66% + 160px)); }
  .hero-spectrum--mirror { clip-path: none;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 55%, #000 calc(66% - 50px), transparent calc(66% + 10px));
    mask-image: linear-gradient(to bottom, transparent 0%, #000 55%, #000 calc(66% - 50px), transparent calc(66% + 10px)); }
}

/* ==== features: three cards, Ponder proportions (2026-11-05) ========================================
   Equal static cards; a large media slot on top (the UI demo will live there, full-bleed, no inner frame),
   title and two-line copy at the bottom-left. */
.feature-deck { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 56px; }
.feature-card { height: auto; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #ffffff12; border-radius: 22px; background: #0d121c; transition: border-color .3s ease; }
.feature-card:hover { border-color: #ffffff22; }
.feature-media { position: relative; aspect-ratio: 5 / 4; display: grid; place-items: center; padding: 24px; background: #111827; border-bottom: 1px solid #ffffff0a; }
.feature-media .fm-legacy { font-size: 12px; letter-spacing: .06em; color: #7f8da7; text-align: center; }
.feature-card-copy { position: static; padding: 32px 36px 40px; }
.feature-card-copy h3 { font-size: clamp(19px, 1.5vw, 22px); font-weight: 600; letter-spacing: .03em; white-space: normal; color: var(--ink); }
.feature-card-copy p { margin-top: 12px; font-size: 15px; line-height: 1.85; color: var(--muted); }
@media (max-width: 1000px) { .feature-deck { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; } }
@media (max-width: 680px) { .feature-deck { gap: 16px; margin-top: 36px; } .feature-card-copy { padding: 24px 24px 30px; } .feature-card-copy p { font-size: 14px; } }
/* hover expansion restored: the hovered (or focused) card widens, the others give way */
@media (min-width: 1001px) {
  .feature-deck { display: flex; gap: 20px; }
  .feature-card { flex: 1 1 0; min-width: 0; transition: flex-grow .6s cubic-bezier(.22, 1, .36, 1), border-color .3s ease; }
  .feature-media { aspect-ratio: auto; height: clamp(300px, 26vw, 400px); }
  .feature-deck:hover .feature-card, .feature-deck:focus-within .feature-card { flex-grow: .8; }
  .feature-deck .feature-card:hover, .feature-deck .feature-card:focus-within { flex-grow: 1.6; border-color: #ffffff24; }
  .feature-card-copy { min-width: 300px; }
}
@media (prefers-reduced-motion: reduce) { .feature-card { transition: none; } }
@media (min-width: 1001px) {
  .feature-deck:hover .feature-card, .feature-deck:focus-within .feature-card { flex-grow: .75; }
  .feature-deck .feature-card:hover, .feature-deck .feature-card:focus-within { flex-grow: 1.9; }
  /* copy keeps its line breaks while the card grows, so only the media area visibly expands */
  .feature-card-copy { width: 340px; min-width: 0; }
}
@media (min-width: 1001px) { .feature-card-copy { width: min(100%, 320px); box-sizing: border-box; padding-inline: 34px; } }
/* copy spreads across the card by default and simply re-wraps when a card narrows; smoother ease-in-out */
@media (min-width: 1001px) {
  .feature-card-copy { width: auto; padding-inline: 36px; }
  .feature-card { transition: flex-grow .75s cubic-bezier(.65, 0, .35, 1), border-color .4s ease, background-color .4s ease; }
  .feature-media { transition: background-color .6s ease; }
  .feature-media .fm-legacy { transition: transform .75s cubic-bezier(.65, 0, .35, 1), opacity .5s ease; }
  .feature-card-copy p { transition: opacity .5s ease, color .5s ease; }
  /* the others recede a little; the active one lifts */
  .feature-deck:hover .feature-card:not(:hover) .feature-card-copy p,
  .feature-deck:focus-within .feature-card:not(:focus-within) .feature-card-copy p { opacity: .55; }
  .feature-deck .feature-card:hover, .feature-deck .feature-card:focus-within { background-color: #0f1521; }
  .feature-deck .feature-card:hover .feature-media, .feature-deck .feature-card:focus-within .feature-media { background-color: #141c2c; }
  .feature-deck .feature-card:hover .feature-media .fm-legacy, .feature-deck .feature-card:focus-within .feature-media .fm-legacy { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) { .feature-card, .feature-media, .feature-media .fm-legacy, .feature-card-copy p { transition: none !important; } }
@media (min-width: 1001px) {
  .feature-card { transition-duration: .5s, .3s, .3s; }
  .feature-media .fm-legacy { transition-duration: .5s, .35s; }
  .feature-card-copy p { transition-duration: .35s, .35s; }
  .feature-media { transition-duration: .4s; }
}

/* ==== features, Ponder-style motion (2026-11-05) ====================================================
   1. a decisive expo-out resize (~0.45s) with a big ratio, 2. the demo keeps its size and is cropped by
   the card (anchored left), so opening a card *reveals* it, 3. the open card replays its demo,
   4. a small link fades in bottom-right. The demos below are drawn placeholders in Motif's palette. */
:root { --expo: cubic-bezier(.16, 1, .3, 1); }
.feature-card { position: relative; }
.feature-media { display: block; padding: 0; overflow: hidden; }
.feature-media > .fm-legacy { display: none; }
.fm-stage { position: absolute; top: 0; bottom: 0; left: 0; width: 640px; padding: 28px; font-size: 12px; color: #c9d3e0; }
@media (min-width: 1001px) {
  .feature-card { transition: flex-grow .45s var(--expo), border-color .3s ease, background-color .3s ease; }
  .feature-deck:hover .feature-card, .feature-deck:focus-within .feature-card { flex-grow: .72; }
  .feature-deck .feature-card:hover, .feature-deck .feature-card:focus-within { flex-grow: 2.3; }
  .feature-card-copy p { transition: opacity .3s ease; }
  .feature-media .fm-legacy, .feature-media { transition: none; }
}
.feature-more { position: absolute; right: 30px; bottom: 26px; font-size: 13px; letter-spacing: .04em; color: var(--ink); text-decoration: none; opacity: 0; transform: translateX(-6px); transition: opacity .3s ease, transform .45s var(--expo); }
.feature-more span { display: inline-block; transition: transform .2s ease; }
.feature-more:hover span { transform: translateX(3px); }
.feature-card:hover .feature-more, .feature-card:focus-within .feature-more { opacity: 1; transform: none; transition-delay: .12s; }
@media (max-width: 1000px) { .feature-more { position: static; display: inline-block; margin: -18px 0 26px 36px; opacity: 1; transform: none; } }

/* --- 1. style: reference chip + composer + status */
.fm-ref { width: 220px; border: 1px solid #ffffff14; border-radius: 12px; background: #161e2d; overflow: hidden; box-shadow: 0 18px 40px -20px #000; }
.fm-thumb { height: 108px; background: radial-gradient(ellipse 60% 70% at 70% 30%, #f3917466, transparent 70%), radial-gradient(ellipse 80% 90% at 20% 80%, #075c96aa, transparent 70%), #0d1626; }
.fm-ref b, .fm-ref i { display: block; height: 7px; margin: 12px 14px 0; border-radius: 4px; background: #ffffff38; width: 70%; }
.fm-ref i { width: 46%; margin-bottom: 14px; background: #ffffff1c; }
.fm-composer { position: relative; margin-top: 18px; width: 420px; padding: 16px 16px 44px; border: 1px solid #ffffff14; border-radius: 14px; background: #121a28; }
.fm-typed { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; max-width: 13em; border-right: 1px solid transparent; }
.fm-chip { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; padding: 3px 9px 3px 4px; border-radius: 6px; background: #ffffff10; color: #dfe6ef; }
.fm-chip em { width: 22px; height: 14px; border-radius: 3px; background: linear-gradient(135deg, #075c96, #f39174); }
.fm-send { position: absolute; right: 12px; bottom: 10px; width: 26px; height: 26px; border-radius: 50%; background: #e9edf2; }
.fm-status { display: flex; align-items: center; gap: 10px; margin-top: 16px; color: #9fb0c4; }
.fm-status small { color: #5f6f86; }
.fm-spin { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid #ffffff2a; border-top-color: #cfe3ef; animation: fm-spin 1s linear infinite; }
@keyframes fm-spin { to { transform: rotate(1turn); } }

/* --- 2. cut: timeline fills in */
.fm-cut { padding: 22px 0 22px 0; }
.fm-ruler { display: flex; gap: 0; margin-left: 96px; height: 18px; border-bottom: 1px solid #ffffff12; color: #5f6f86; font-size: 10px; font-variant-numeric: tabular-nums; }
.fm-ruler span { flex: 1; padding-left: 4px; border-left: 1px solid #ffffff14; }
.fm-tracks { margin-top: 8px; }
.fm-track { position: relative; height: 30px; margin-bottom: 6px; }
.fm-track.tall { height: 52px; }
.fm-track label { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 70px; font-size: 10px; color: #7f8da7; }
.fm-track i { position: absolute; top: 3px; bottom: 3px; border-radius: 5px; transform-origin: left center; }
.c-cap { background: #8a6cc9; }
.c-gfx { background: #39aecb; }
.c-vid { background: linear-gradient(90deg, #1d4f7d, #2a6a9c); border: 1px solid #ffffff1a; }
.c-bgm { background: repeating-linear-gradient(90deg, #2c5c86 0 2px, #1f4467 2px 4px); }
.fm-playhead { position: absolute; top: 18px; bottom: 16px; left: 360px; width: 1.5px; background: #6aa8ff; box-shadow: 0 0 10px #6aa8ff; }
.fm-playhead::before { content: ""; position: absolute; top: -2px; left: -5px; width: 11px; height: 11px; border-radius: 3px; background: #6aa8ff; }

/* --- 3. revise: draw on the frame */
.fm-revise { padding: 24px; }
.fm-frame { position: relative; width: 560px; height: 100%; border-radius: 12px; overflow: hidden; background: radial-gradient(ellipse 50% 70% at 30% 60%, #f3917455, transparent 70%), radial-gradient(ellipse 60% 80% at 80% 20%, #075c9688, transparent 70%), linear-gradient(160deg, #182338, #0b111d); }
.fm-caption { position: absolute; left: 50%; bottom: 18%; transform: translateX(-50%); padding: 6px 14px; border-radius: 6px; background: #000000a0; color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .04em; white-space: nowrap; transform-origin: 50% 100%; }
.fm-mark { position: absolute; left: calc(50% - 130px); bottom: calc(18% - 14px); width: 260px; height: 60px; border: 1.5px dashed #ff6b6b; border-radius: 10px; }
.fm-note { position: absolute; left: calc(50% + 90px); bottom: calc(18% + 54px); padding: 6px 12px; border-radius: 8px; background: #0b111dd9; border: 1px solid #ffffff1c; color: #e6edf5; white-space: nowrap; }
.fm-note b { margin-right: 8px; color: #6aa8ff; font-weight: 500; }
.fm-cursor { position: absolute; left: calc(50% + 140px); bottom: calc(18% - 22px); width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 16px solid #b9a6ff; transform: rotate(-30deg); }

/* --- replay on open: each demo animates from its start whenever its card becomes the open one */
@keyframes fm-in-up { from { opacity: 0; transform: translateY(14px); } }
@keyframes fm-type { from { max-width: 0; } }
@keyframes fm-grow { from { transform: scaleX(0); } }
@keyframes fm-play { from { left: 96px; } }
@keyframes fm-pop { 0% { opacity: 0; transform: scale(.85); } 100% { opacity: 1; transform: none; } }
@keyframes fm-draw { from { clip-path: inset(0 100% 0 0); } }
@keyframes fm-bigger { from { transform: translateX(-50%) scale(1); } to { transform: translateX(-50%) scale(1.35); } }
@keyframes fm-cursor { from { transform: translate(-120px, 30px) rotate(-30deg); opacity: 0; } 30% { opacity: 1; } }
.feature-card:hover .fm-ref, .feature-card:focus-within .fm-ref { animation: fm-in-up .55s var(--expo) both; }
.feature-card:hover .fm-composer, .feature-card:focus-within .fm-composer { animation: fm-in-up .55s .08s var(--expo) both; }
.feature-card:hover .fm-typed, .feature-card:focus-within .fm-typed { animation: fm-type .9s .25s steps(12) both; }
.feature-card:hover .fm-chip, .feature-card:focus-within .fm-chip { animation: fm-pop .35s 1.1s var(--expo) both; }
.feature-card:hover .fm-status, .feature-card:focus-within .fm-status { animation: fm-in-up .45s 1.35s var(--expo) both; }
.feature-card:hover .fm-track i, .feature-card:focus-within .fm-track i { animation: fm-grow .5s calc(var(--d) + .05s) var(--expo) both; }
.feature-card:hover .fm-playhead, .feature-card:focus-within .fm-playhead { animation: fm-play 1.6s .2s cubic-bezier(.45, 0, .55, 1) both; }
.feature-card:hover .fm-mark, .feature-card:focus-within .fm-mark { animation: fm-draw .5s .55s ease-out both; }
.feature-card:hover .fm-cursor, .feature-card:focus-within .fm-cursor { animation: fm-cursor .7s .05s var(--expo) both; }
.feature-card:hover .fm-note, .feature-card:focus-within .fm-note { animation: fm-pop .35s .95s var(--expo) both; }
.feature-card:hover .fm-caption, .feature-card:focus-within .fm-caption { animation: fm-bigger .5s 1.4s var(--expo) both; }
@media (prefers-reduced-motion: reduce) { .feature-card *, .feature-card { animation: none !important; transition: none !important; } }
/* demos sized for the open card (~800px); narrow cards crop them from the left edge */
.fm-stage { width: 820px; }
.fm-frame { width: 100%; }
.fm-composer { width: 460px; }
.fm-playhead { left: 450px; }
/* calmer: gentler curve, a little longer, smaller size change, softer demo motion */
:root { --soft-out: cubic-bezier(.25, .8, .3, 1); }
@media (min-width: 1001px) {
  .feature-card { transition: flex-grow .6s var(--soft-out), border-color .4s ease, background-color .4s ease; }
  .feature-deck:hover .feature-card, .feature-deck:focus-within .feature-card { flex-grow: .82; }
  .feature-deck .feature-card:hover, .feature-deck .feature-card:focus-within { flex-grow: 1.9; }
}
.feature-more { transition: opacity .4s ease, transform .6s var(--soft-out); }
@keyframes fm-in-up { from { opacity: 0; transform: translateY(8px); } }
@keyframes fm-pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes fm-bigger { from { transform: translateX(-50%) scale(1); } to { transform: translateX(-50%) scale(1.25); } }
.feature-card:hover .fm-ref, .feature-card:focus-within .fm-ref { animation: fm-in-up .8s var(--soft-out) both; }
.feature-card:hover .fm-composer, .feature-card:focus-within .fm-composer { animation: fm-in-up .8s .12s var(--soft-out) both; }
.feature-card:hover .fm-chip, .feature-card:focus-within .fm-chip { animation: fm-pop .6s 1.1s var(--soft-out) both; }
.feature-card:hover .fm-status, .feature-card:focus-within .fm-status { animation: fm-in-up .7s 1.4s var(--soft-out) both; }
.feature-card:hover .fm-track i, .feature-card:focus-within .fm-track i { animation: fm-grow .8s calc(var(--d) * 1.4 + .1s) var(--soft-out) both; }
.feature-card:hover .fm-playhead, .feature-card:focus-within .fm-playhead { animation: fm-play 2.2s .3s cubic-bezier(.45, 0, .55, 1) both; }
.feature-card:hover .fm-mark, .feature-card:focus-within .fm-mark { animation: fm-draw .8s .7s ease-in-out both; }
.feature-card:hover .fm-cursor, .feature-card:focus-within .fm-cursor { animation: fm-cursor 1s .1s var(--soft-out) both; }
.feature-card:hover .fm-note, .feature-card:focus-within .fm-note { animation: fm-pop .6s 1.3s var(--soft-out) both; }
.feature-card:hover .fm-caption, .feature-card:focus-within .fm-caption { animation: fm-bigger .9s 1.8s ease-in-out both; }

/* できること cards: the plan card's colour hairline along the top edge, shown on hover */
.glass-card { position: relative; overflow: hidden; transition: border-color .4s ease, background-color .4s ease; }
.glass-card::before { content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, #6699eb, #96d7d9, #efb486, transparent);
  opacity: 0; transform: scaleX(.6); transition: opacity .5s cubic-bezier(.65, 0, .35, 1), transform .7s cubic-bezier(.16, 1, .3, 1); }
.glass-card:hover::before, .glass-card:focus-within::before { opacity: .7; transform: none; }
.glass-card:hover { border-color: #ffffff24; }
@media (prefers-reduced-motion: reduce) { .glass-card::before { transition: none; } }
.glass-card::before { inset: auto; top: 0; left: 24px; right: 24px; height: 1px; padding: 0; border-radius: 0; -webkit-mask: none; mask: none; display: block; z-index: 1; }
.glass-card:hover::before, .glass-card:focus-within::before { opacity: 1; box-shadow: 0 0 10px 0 #96d7d940; }

/* hero: the recorded demo (Motif window, 16:10) */
.hero-media.hero-video { aspect-ratio: 16 / 10; padding: 0; display: block; overflow: hidden; border: 1px solid #ffffff1c; }
.hero-video video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* hero lifted so more of the recording shows above the fold (2026-11-08): same rhythm, every gap a step smaller */
.hero { padding-top: 60px; }
.hero-sub { margin-top: 12px; }
.hero .actions { margin-top: 26px; }
.hero .demo { margin-top: 40px; }
@media (max-width: 680px) { .hero { padding-top: 36px; } .hero .actions { margin-top: 22px; } .hero .demo { margin-top: 32px; } }

/* ---- scroll reveal (2026-11-08): headings, then cards rise in from below, one after another.
   Uses opacity + the separate `translate` property in an animation, so the cards' own hover transitions stay intact. */
.rv-on .rv { opacity: 0; }
.rv-on .rv.in { animation: rv-up 1.05s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--rv, 0) * 1ms); }
@keyframes rv-up { from { opacity: 0; translate: 0 44px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .rv-on .rv { opacity: 1; } .rv-on .rv.in { animation: none; } }

/* hero buttons a size smaller (2026-11-08), a little more air above them */
.hero .button { min-height: 44px; padding: 0 22px; font-size: 14px; }
.hero .actions { margin-top: 30px; gap: 10px; }
@media (max-width: 680px) { .hero .button { min-height: 42px; padding: 0 20px; font-size: 13.5px; } }