/* Hallmark · homepage · five-screen product story
 * screen 1 hero · screen 2 capabilities · screen 3 workflow
 * screen 4 local data · screen 5 pricing and action
 */

.hero { position: relative; overflow: hidden; padding: 94px 0 0; background: linear-gradient(180deg, #061538 0%, #0a3da0 52%, #2389f8 100%); color: #fff; }
.hero::before { content: ""; position: absolute; inset: -180px -20% auto; height: 620px; background: radial-gradient(circle, rgba(98, 190, 255, .38), transparent 64%); pointer-events: none; }
.hero::after { content: ""; position: absolute; inset: auto -10% -100px; height: 340px; background: radial-gradient(circle, rgba(255,255,255,.24), transparent 64%); pointer-events: none; }
.hero > .wrap { position: relative; z-index: 1; }
.hero__inner { text-align: center; }
.hero__eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 7px 13px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; color: rgba(255,255,255,.9); font-size: 13px; font-weight: 700; }
.hero h1 { max-width: 13em; margin: 20px auto 0; font-size: clamp(34px, 4.2vw, 54px); line-height: 1.14; letter-spacing: -.035em; }
.hero h1 span { color: #c9e4ff; }
.hero__lead { max-width: 48em; margin: 20px auto 0; color: rgba(255,255,255,.82); font-size: 17px; line-height: 1.8; }
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.hero__cta .btn--pri { background: #fff; border-color: #fff; color: var(--blue-mid); box-shadow: 0 16px 38px rgba(0,8,30,.22); }
.hero__cta .btn--ghost { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.42); color: #fff; }
.hero__note { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin-top: 24px; color: rgba(255,255,255,.74); font-size: 13px; }
.hero__note span { display: inline-flex; align-items: center; gap: 7px; }
.hero__note span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #b9e2ff; }
.hero__preview { margin-top: 48px; overflow: hidden; background: rgba(255,255,255,.98); border: 1px solid rgba(255,255,255,.3); border-bottom: 0; border-radius: 28px 28px 0 0; box-shadow: 0 -12px 60px rgba(0, 11, 45, .24); color: var(--ink); text-align: left; }
.preview-bar { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 17px; background: #f4f7fc; border-bottom: 1px solid var(--line); }
.preview-dots { display: flex; gap: 6px; }
.preview-dots span { width: 10px; height: 10px; border-radius: 50%; background: #d7dfec; }
.preview-dots span:nth-child(1) { background: #ff6b6b; }
.preview-dots span:nth-child(2) { background: #ffd166; }
.preview-dots span:nth-child(3) { background: #5ed39d; }
.preview-title { margin: 0 auto; color: var(--ink-2); font-size: 12px; font-weight: 700; }
.preview-body { display: grid; grid-template-columns: 208px minmax(0, 1fr) 252px; min-height: 390px; }
.preview-rail { padding: 18px 12px; background: #f7f9fd; border-right: 1px solid var(--line); }
.preview-rail__label { padding: 0 9px 8px; color: var(--muted); font-size: 11px; font-weight: 700; }
.preview-rail__item { display: flex; align-items: center; gap: 9px; min-height: 38px; padding: 0 10px; border-radius: 10px; color: var(--ink-2); font-size: 12px; }
.preview-rail__item.is-on { background: var(--blue-soft); color: var(--blue-mid); font-weight: 800; }
.preview-rail__item i { width: 7px; height: 7px; border-radius: 50%; background: #c7d3e5; }
.preview-rail__item.is-on i { background: var(--blue); }
.preview-doc { padding: 22px; background: #fff; }
.preview-doc__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.preview-doc__head h3 { font-size: 18px; }
.preview-doc__head span { color: var(--muted); font-size: 12px; }
.doc-paper { padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 12px 32px rgba(21, 67, 141, .08); }
.doc-paper h4 { margin-bottom: 14px; font-size: 16px; }
.doc-line { height: 9px; margin-top: 10px; border-radius: 999px; background: #e9eef7; }
.doc-line--long { width: 100%; }
.doc-line--mid { width: 82%; }
.doc-line--short { width: 56%; }
.doc-line--blue { background: #cfe1ff; }
.doc-cite { display: inline-flex; margin-top: 14px; padding: 4px 8px; background: var(--blue-soft); border-radius: 999px; color: var(--blue-mid); font-size: 11px; font-weight: 700; }
.preview-ai { padding: 20px 16px; background: #f8fbff; border-left: 1px solid var(--line); }
.preview-ai__title { color: var(--blue-mid); font-size: 12px; font-weight: 800; }
.preview-ai__row { display: flex; gap: 9px; margin-top: 14px; color: var(--ink-2); font-size: 12px; line-height: 1.55; }
.preview-ai__row i { flex: none; width: 20px; height: 20px; display: grid; place-items: center; background: var(--blue-soft); border-radius: 7px; color: var(--blue); font-size: 10px; font-style: normal; font-weight: 800; }
.preview-ai__card { margin-top: 18px; padding: 13px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }

.feature-sec { background: #fff; }
.feature-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.feature-card { padding: 28px; background: var(--paper); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow-card); }
.feature-card--wide { grid-column: span 7; }
.feature-card--side { grid-column: span 5; }
.feature-card--half { grid-column: span 6; }
.feature-card--third { grid-column: span 4; }
.feature-card__icon { display: grid; width: 46px; height: 46px; place-items: center; background: var(--blue-soft); border-radius: 15px; color: var(--blue); }
.feature-card h3 { margin-top: 22px; font-size: 24px; }
.feature-card p { margin-top: 10px; color: var(--ink-2); font-size: 14px; line-height: 1.75; }
.feature-card--half h3, .feature-card--third h3 { margin-top: 18px; font-size: 18px; }
.feature-visual { margin-top: 24px; padding: 16px; background: var(--paper-soft); border-radius: 18px; }
.mini-file { display: flex; align-items: center; gap: 10px; padding: 11px 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; color: var(--ink-2); font-size: 12px; }
.mini-file + .mini-file { margin-top: 8px; }
.mini-file b { color: var(--blue-mid); }
.source-chip { display: inline-flex; margin-top: 12px; padding: 4px 8px; background: var(--blue-soft); border-radius: 999px; color: var(--blue-mid); font-size: 11px; }

.workflow-sec { background: linear-gradient(180deg, #f7faff 0%, #eef5ff 100%); }
.workflow { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: 54px; align-items: center; }
.workflow__steps { display: grid; gap: 12px; }
.workflow__step { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 14px; padding: 18px; background: rgba(255,255,255,.65); border: 1px solid transparent; border-radius: 18px; }
.workflow__step.is-on { background: #fff; border-color: #c8dafb; box-shadow: var(--shadow-card); }
.workflow__num { display: grid; width: 34px; height: 34px; place-items: center; background: var(--blue-soft); border-radius: 50%; color: var(--blue-mid); font-size: 12px; font-weight: 800; }
.workflow__step h3 { font-size: 18px; }
.workflow__step p { margin-top: 6px; color: var(--ink-2); font-size: 13px; line-height: 1.65; }
.workflow__preview { padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow-card); }
.workflow__preview .doc-paper { min-height: 360px; }
.workflow__toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; color: var(--muted); font-size: 12px; }
.workflow__toolbar b { color: var(--blue-mid); }

.local-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.local-copy h2 { font-size: clamp(28px, 3vw, 40px); }
.local-copy p { max-width: 42em; margin-top: 18px; color: var(--ink-2); font-size: 16px; line-height: 1.85; }
.local-points { display: grid; gap: 10px; margin-top: 24px; }
.local-points div { display: flex; align-items: flex-start; gap: 10px; color: var(--ink-2); font-size: 14px; }
.local-points .ic { margin-top: 3px; color: var(--blue); }
.local-visual { padding: 22px; background: linear-gradient(145deg, #0a2b79 0%, #0c61e6 100%); border-radius: 28px; box-shadow: var(--shadow-float); color: #fff; }
.local-visual__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.local-visual__head b { font-size: 15px; }
.local-visual__head span { padding: 5px 9px; background: rgba(255,255,255,.14); border-radius: 999px; font-size: 11px; }
.local-path { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 12px 14px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: 14px; color: rgba(255,255,255,.9); font-family: var(--font-mono); font-size: 12px; }
.local-path + .local-path { margin-top: 10px; }
.local-path i { width: 9px; height: 9px; border-radius: 50%; background: #72d39d; box-shadow: 0 0 0 4px rgba(114,211,157,.14); }
.local-visual__foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.72); font-size: 12px; }

.pricing-sec { background: #fff; }
.pricing { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.price { display: flex; min-height: 330px; flex-direction: column; padding: 30px 28px; background: #fff; border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow-card); }
.price--hot { background: linear-gradient(155deg, #071d52, #0b4cc7); color: #fff; border-color: transparent; }
.price__name { font-size: 15px; font-weight: 800; }
.price__amt { display: flex; align-items: baseline; gap: 6px; margin-top: 20px; }
.price__amt b { font-size: 42px; line-height: 1; }
.price__amt span { font-size: 13px; opacity: .8; }
.price p { margin-top: 14px; color: inherit; font-size: 13.5px; line-height: 1.7; opacity: .86; }
.price .btn { width: 100%; margin-top: auto; }
.price--hot .price__tag { display: inline-block; width: fit-content; margin-bottom: 18px; padding: 5px 10px; border: 1px solid #9fc0ff; border-radius: 999px; font-size: 11px; font-weight: 800; }
.price--hot .btn--pri { background: #fff; border-color: #fff; color: var(--blue-mid); }
.cta-mini { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; margin-top: 52px; padding: 32px; background: linear-gradient(135deg, #eef5ff, #e3efff); border-radius: 28px; }
.cta-mini h2 { font-size: 24px; }
.cta-mini p { max-width: 48em; margin-top: 9px; color: var(--ink-2); font-size: 14px; }
.cta-mini .btn { align-self: center; }

@media (max-width: 980px) {
  .preview-body { grid-template-columns: 180px minmax(0, 1fr); }
  .preview-ai { display: none; }
  .feature-card--wide, .feature-card--side { grid-column: span 12; }
  .feature-card--half { grid-column: span 6; }
.feature-card--third { grid-column: span 4; }
  .workflow, .local-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
}
@media (max-width: 720px) {
  .hero { padding-top: 58px; }
  .hero h1 { font-size: 34px; }
  .hero__lead { font-size: 15px; }
  .hero__cta, .hero__cta .btn { width: 100%; }
  .preview-body { grid-template-columns: minmax(0, 1fr); }
  .preview-rail { display: none; }
  .preview-doc { padding: 14px; }
  .feature-card--half, .feature-card--third, .price, .pricing, .cta-mini { grid-column: span 12; }
  .feature-card--half, .feature-card--third { grid-column: span 12; }
  .pricing { grid-template-columns: minmax(0, 1fr); }
  .cta-mini { grid-template-columns: minmax(0, 1fr); }
  .cta-mini .btn { justify-self: start; }
}