/* Landing page */
.dim { color: var(--subtle); }
.lead { font-size: var(--t-md); color: var(--muted); max-width: 52ch; line-height: 1.6; }
.btn-ghost-line { background: transparent; box-shadow: none; }
.btn-ghost-line:hover { background: var(--panel-2); }
@media (max-width: 420px) { .hide-xs { display: none !important; } }

/* hero */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero-grid { position: absolute; inset: 0; pointer-events: none; }
.hero-glow { position: absolute; right: -10%; top: -20%; width: 70%; height: 120%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%); filter: blur(10px); }
.hero-inner { position: relative; display: grid; grid-template-columns: 1.12fr 0.88fr; gap: var(--s9); align-items: center; padding-top: var(--s11); padding-bottom: var(--s12); }
.hero-badge { height: 28px; padding: 0 12px; font-size: var(--t-xs); }
.hero-copy h1 { margin: var(--s6) 0 var(--s5); max-width: 15ch; font-size: clamp(2.4rem, 5vw, 4.1rem); }
.hero-copy .lead { font-size: 1.16rem; }
.cta-row { display: flex; gap: var(--s3); flex-wrap: wrap; margin: var(--s7) 0 var(--s4); }
.cta-row .btn-ghost-line { --h: 56px; padding: 0 20px; }
.hero-note { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--muted); font-size: var(--t-sm); margin: 0; }
.hero-note .i { color: var(--accent); }
.hero-note .sep { color: var(--subtle); }
.hero-stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: var(--s7); margin: var(--s8) 0 0; padding-top: var(--s6); border-top: 1px solid var(--line); }
.hero-stats div { margin: 0; }
.hero-stats dt { font-size: var(--t-sm); color: var(--fg); letter-spacing: 0.06em; font-weight: 500; }
.hero-stats dd { margin: 4px 0 0; font-size: var(--t-xs); color: var(--subtle); }
.hero-frame { margin: 0; }
.frame-title { flex: 1; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: none; letter-spacing: 0.02em; }
.live-tag { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); }
.hero-stage { aspect-ratio: 1 / 0.92; }
.model-slot { position: absolute; inset: 0; }
.model-slot model-viewer { width: 100%; height: 100%; opacity: 0; transition: opacity 0.6s var(--ease); }
.stage.model-ready .model-slot model-viewer { opacity: 1; }
.stage .label.tl { left: 22px; top: 20px; }
.stage .label.br { right: 22px; bottom: 20px; }
.stage .label.tr { right: 22px; top: 20px; }

/* sections */
.section { padding: var(--s12) 0; border-bottom: 1px solid var(--line); position: relative; }
.section.last { border-bottom: 0; }
.section-head { max-width: 720px; margin-bottom: var(--s9); }
.section-head h2 { margin-bottom: var(--s4); }
.center-head { margin-left: auto; margin-right: auto; text-align: center; }
.center-head .eyebrow { justify-content: center; }

/* how it works */
.how { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); counter-reset: none; }
.how-card { display: flex; flex-direction: column; padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r-lg); background: linear-gradient(180deg, var(--panel), var(--bg-2)); box-shadow: var(--shadow-1); min-width: 0; }
.how-top { display: flex; align-items: baseline; gap: 10px; margin-bottom: var(--s2); }
.how-top h3 { margin: 0; font-size: var(--t-md); }
.step-no { font-size: var(--t-xs); color: var(--accent); letter-spacing: 0.08em; }
.how-card > p { font-size: var(--t-sm); margin-bottom: var(--s5); line-height: 1.55; }
.how-card .frames-meta, .how-card .ar-try { margin-top: auto; padding-top: var(--s4); }

.capture-demo { display: grid; place-items: center; }
.small-phone { width: 100%; max-width: 230px; border-radius: 34px; padding: 8px; }
.small-phone::before { top: 15px; height: 16px; }
.small-phone .screen-in { border-radius: 27px; background: #000; }
.small-phone img { width: 100%; height: 100%; object-fit: cover; }
.cap-hud-top { position: absolute; left: 0; right: 0; top: 32px; display: grid; justify-items: center; gap: 5px; padding: 0 8px; }
.cap-step { padding: 3px 9px; border-radius: 999px; background: rgb(0 0 0 / 0.62); font: 600 0.56rem/1.4 var(--font); color: #fff; letter-spacing: 0.01em; backdrop-filter: blur(4px); white-space: nowrap; }
.cap-hint { padding: 5px 10px; border-radius: 999px; background: rgb(20 130 80 / 0.88); font: 600 0.6rem/1.3 var(--font); color: #fff; text-align: center; max-width: 92%; }
/* (no fake detection box: frames are shown as captured) */
.cap-box-unused { position: absolute; left: 20%; right: 20%; top: 41%; height: 15%; border: 2.5px solid #3ecf8e; border-radius: 10px; transition: all 0.4s var(--ease); }
.cap-box span { position: absolute; top: -17px; left: -2px; padding: 1px 7px; border-radius: 8px; background: #3ecf8e; color: #0f1115; font: 600 0.55rem/1.4 var(--font); }
.cap-hud-bottom { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 22px 10px 12px; background: linear-gradient(transparent, rgb(0 0 0 / 0.78)); }
.cap-ring { width: 50px; height: 50px; flex: none; }
.cap-ring .seg { fill: none; stroke: rgb(255 255 255 / 0.22); stroke-width: 9; }
.cap-ring .seg.on { stroke: #4ade80; }
.cap-ring text { fill: #fff; font: 700 17px var(--font); }
.cap-stats { flex: 1; color: #fff; font-size: 0.62rem; }
.cap-stats b { font-size: 0.85rem; }
.cap-quality { height: 4px; margin-top: 5px; border-radius: 3px; background: rgb(255 255 255 / 0.2); overflow: hidden; }
.cap-quality span { display: block; height: 100%; width: 82%; background: #4ade80; transition: width 0.3s; }

.frames-demo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 6px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); }
.frames-demo span { position: relative; aspect-ratio: 9 / 16; border-radius: 4px; background: var(--panel-2) center / cover no-repeat; opacity: 0.25; transform: scale(0.94); transition: opacity 0.4s, transform 0.4s var(--ease); }
.frames-demo span.on { opacity: 1; transform: none; }
.frames-demo span.on::after { content: ""; position: absolute; right: 3px; bottom: 3px; width: 9px; height: 9px; border-radius: 50%; background: var(--good) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23052e16' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 7px no-repeat; }
.frames-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: var(--s3); font-size: 0.6875rem; color: var(--subtle); letter-spacing: 0.04em; text-transform: uppercase; }
.frames-meta b { color: var(--fg); }

.result-stage { aspect-ratio: 1 / 1.12; border-radius: var(--r); border: 1px solid var(--line); overflow: hidden; }
.result-stage .poster-img { padding: 12%; }

.ar-visual { position: relative; aspect-ratio: 1 / 0.8; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: linear-gradient(180deg, #1b1712 0%, #2b2219 55%, #3a2c1f 100%); }
:root[data-theme="light"] .ar-visual { background: linear-gradient(180deg, #e9e4dc, #d8cbb8); }
.ar-table { position: absolute; left: -10%; right: -10%; bottom: -30%; height: 75%; border-radius: 50%; background: radial-gradient(closest-side, #6b4f35, #4a3524 70%, transparent 71%); transform: perspective(300px) rotateX(55deg); opacity: 0.9; }
.ar-dish { position: absolute; left: 50%; top: 50%; width: 52%; transform: translate(-50%, -48%); filter: drop-shadow(0 14px 14px rgb(0 0 0 / 0.55)); mix-blend-mode: lighten; }
.ar-ring { position: absolute; left: 50%; top: 66%; width: 60%; height: 16%; transform: translate(-50%, -50%); border: 1.5px dashed color-mix(in srgb, var(--accent) 80%, transparent); border-radius: 50%; animation: ar-pulse 2.4s ease-in-out infinite; }
@keyframes ar-pulse { 50% { transform: translate(-50%, -50%) scale(1.08); opacity: 0.5; } }
.ar-btn-mock { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: 600 0.66rem var(--font); white-space: nowrap; box-shadow: 0 6px 18px -6px var(--accent); }
.ar-try { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s4); }
.ar-try .qr-box { width: 76px; flex: none; padding: 6px; border-radius: 10px; }
.ar-try p { margin: 0; }

.capture-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s6); margin-top: var(--s9); padding-top: var(--s7); border-top: 1px solid var(--line); }
.cf { display: flex; gap: 12px; }
.cf .i { color: var(--accent); margin-top: 2px; }
.cf b { display: block; font-size: var(--t-sm); margin-bottom: 4px; }
.cf span { font-size: var(--t-xs); color: var(--muted); line-height: 1.55; display: block; }

/* menu section */
.menu-split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--s11); align-items: center; }
.ticks-list { list-style: none; padding: 0; margin: var(--s6) 0 var(--s7); display: grid; gap: 14px; }
.ticks-list li { display: flex; align-items: center; gap: 12px; font-size: var(--t-base); }
.ticks-list .i { color: var(--accent); flex: none; }
.demo-qr { display: flex; gap: var(--s5); align-items: center; padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); max-width: 460px; }
.demo-qr .qr-box { width: 112px; flex: none; padding: 8px; border-radius: 10px; }
.demo-qr b { display: block; margin-bottom: 2px; }
.demo-qr p { margin: 0 0 12px; }
.menu-phone .phone { max-width: 340px; margin: 0 auto; }

/* pricing */
.price-grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: var(--s4); align-items: stretch; }
.price-card { position: relative; display: flex; flex-direction: column; padding: var(--s7) var(--s6) var(--s6); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--panel); box-shadow: var(--shadow-1); }
.price-card.featured { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, var(--panel)), var(--panel) 55%); box-shadow: var(--shadow-3); }
.price-card .badge.solid { position: absolute; top: var(--s5); right: var(--s5); }
.price-card h3 { font-size: var(--t-md); margin: 0; }
.price-card .amount { display: flex; align-items: baseline; gap: 6px; margin: var(--s4) 0 var(--s1); }
.price-card .num { font-size: 3.2rem; font-weight: 600; letter-spacing: -0.05em; line-height: 1; }
.price-card .per { color: var(--subtle); font-size: var(--t-sm); }
.price-sub { color: var(--muted); font-size: var(--t-sm); min-height: 1.6em; margin: 0; }
.price-card ul { list-style: none; padding: 0; margin: var(--s6) 0 var(--s6); display: grid; gap: 11px; font-size: var(--t-sm); }
.price-card li { display: flex; gap: 10px; }
.price-card li::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff9f43' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 10px no-repeat; }
.price-card li:empty { display: none; }
.price-card .btn { margin-top: auto; }
.price-example { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; align-items: center; margin: var(--s7) auto var(--s3); padding: var(--s4) var(--s5); max-width: 760px; border: 1px dashed var(--line-2); border-radius: var(--r); text-align: center; font-size: var(--t-sm); color: var(--muted); }
.price-example b { color: var(--fg); }

/* pricing: start offer + plans (milestone B) */
.start-offer { position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s7); align-items: center; max-width: 980px; margin: 0 auto var(--s9); padding: var(--s6) var(--s7); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: var(--r-xl); background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 55%), var(--panel); box-shadow: var(--shadow-3); }
.so-price { display: grid; justify-items: start; gap: 10px; }
.so-price .num { font-size: 4.2rem; font-weight: 600; letter-spacing: -0.06em; line-height: 0.9; }
.so-text h3 { font-size: var(--t-xl); margin: 0 0 6px; }
.so-text p { margin: 0; color: var(--muted); }
.plans-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); flex-wrap: wrap; margin: 0 0 var(--s4); }
.plans-bar .eyebrow { margin: 0; }
.price-grid.plans { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
.price-grid.plans .price-card { padding: var(--s6) var(--s5) var(--s5); }
.price-card .plan-name { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; color: var(--accent); }
.price-card .num { font-size: 2.6rem; }
.price-card .num.custom { font-size: 1.7rem; letter-spacing: -0.035em; }
.price-card.custom { background: linear-gradient(160deg, var(--panel-2), var(--panel) 70%); }
.price-card ul.plan-list { gap: 12px; margin: var(--s5) 0 var(--s6); color: var(--muted); }
.price-card .plan-list li::before { display: none; }
.price-card .plan-list li { align-items: flex-start; gap: 9px; }
.price-card .plan-list li > .i { margin-top: 3px; color: var(--accent); }
.price-card .plan-list li > span { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.price-card .plan-list b { color: var(--fg); font-weight: 600; }
.badge.soon { height: 20px; font-size: 0.58rem; letter-spacing: 0.08em; }
.price-shared { display: flex; justify-content: center; align-items: center; gap: 8px; margin: var(--s5) auto 0; padding: 12px var(--s5); max-width: 860px; border: 1px dashed var(--line-2); border-radius: var(--r); font-size: var(--t-sm); color: var(--muted); text-align: center; }
.price-shared .i { color: var(--good); flex: none; }
.price-extras { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; max-width: 860px; margin: var(--s5) auto var(--s4); background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.price-extras > div { display: grid; gap: 4px; padding: var(--s5); background: var(--panel); }
.price-extras .eyebrow { margin: 0 0 4px; }
.price-extras b { font-size: 1.8rem; font-weight: 600; letter-spacing: -0.04em; line-height: 1.1; }
.price-extras .per { font-size: var(--t-sm); color: var(--subtle); font-weight: 500; letter-spacing: 0; }
.price-foot { max-width: 680px; margin: var(--s4) auto 0; }
@media (max-width: 1080px) {
  .price-grid.plans { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; margin: 0 auto; }
}
@media (max-width: 760px) {
  .start-offer { grid-template-columns: auto minmax(0, 1fr); gap: var(--s4) var(--s5); padding: var(--s5); }
  .start-offer > .btn { grid-column: 1 / -1; }
  .so-price .num { font-size: 3.2rem; }
}
@media (max-width: 600px) {
  .price-grid.plans { grid-template-columns: 1fr; }
  .price-extras { grid-template-columns: 1fr; }
  .plans-bar { justify-content: center; }
}

/* faq */
.faq-wrap { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--s10); align-items: start; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: var(--s5) 0; font-weight: 500; display: flex; justify-content: space-between; align-items: center; gap: var(--s4); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-2); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a3ad' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 12px no-repeat; transition: transform 0.25s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--accent); }
.faq details p { color: var(--muted); margin: 0 0 var(--s5); font-size: var(--t-sm); max-width: 62ch; }

/* final CTA */
.cta-box { position: relative; overflow: hidden; text-align: center; padding: var(--s12) var(--s6); border: 1px solid var(--line); border-radius: 28px; background: var(--panel); display: grid; justify-items: center; }
.cta-box .bg-grid { position: absolute; inset: 0; }
.cta-glow { position: absolute; left: 50%; bottom: -60%; width: 80%; height: 100%; transform: translateX(-50%); background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), transparent); pointer-events: none; }
.cta-box > *:not(.bg-grid):not(.cta-glow) { position: relative; }
.cta-box h2 { margin-bottom: var(--s7); }
.cta-box p { margin: var(--s4) 0 0; }

/* footer */
.site-footer { padding: var(--s10) 0 var(--s7); border-top: 1px solid var(--line); }
.foot { display: flex; justify-content: space-between; gap: var(--s8); flex-wrap: wrap; }
.foot-brand { max-width: 300px; }
.foot-brand p { margin-top: var(--s3); }
.foot-cols { display: flex; gap: var(--s10); flex-wrap: wrap; }
.foot-cols div { display: grid; gap: 10px; align-content: start; }
.foot-cols .eyebrow { margin-bottom: 4px; }
.foot-cols a { color: var(--muted); text-decoration: none; font-size: var(--t-sm); }
.foot-cols a:hover { color: var(--fg); }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); flex-wrap: wrap; margin-top: var(--s9); padding-top: var(--s5); border-top: 1px solid var(--line); }

@media (max-width: 1080px) {
  .how { grid-template-columns: 1fr 1fr; }
  .capture-features { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; gap: var(--s8); padding-top: var(--s8); padding-bottom: var(--s10); }
  .hero-copy h1 { max-width: 16ch; }
  .menu-split, .faq-wrap { grid-template-columns: 1fr; gap: var(--s8); }
  .price-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .section { padding: var(--s11) 0; }
}
@media (max-width: 600px) {
  .how { grid-template-columns: 1fr; }
  .capture-features { grid-template-columns: 1fr; gap: var(--s5); }
  .hero-stats { display: none; }
  .hero-inner { gap: var(--s7); }
  .hero-copy .lead { font-size: 1.05rem; }
  .cta-row .btn { width: 100%; }
  .btn-xl { --h: 54px; padding: 0 20px; font-size: var(--t-base); }
  .section-head { margin-bottom: var(--s7); }
  .demo-qr .qr-box { width: 92px; }
  .cta-box { padding: var(--s10) var(--s5); }
  .foot-cols { gap: var(--s7); }
}

/* AI option, under the capture features */
.ai-strip { display: flex; align-items: center; gap: var(--s4); margin-top: var(--s6); padding: var(--s5); border: 1px solid color-mix(in srgb, var(--info) 30%, var(--line)); border-radius: var(--r-lg); background: linear-gradient(140deg, color-mix(in srgb, var(--info) 9%, transparent), var(--panel) 65%); }
.ai-strip-icon { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--info) 14%, var(--panel-2)); color: var(--info); }
.ai-strip-text { flex: 1; display: grid; gap: 4px; }
.ai-strip-text span { color: var(--muted); font-size: var(--t-sm); }
@media (max-width: 720px) { .ai-strip { flex-direction: column; align-items: flex-start; } }

/* points explainer under the plans */
.points-explain { max-width: 860px; margin: var(--s6) auto 0; }
.points-explain > p { text-align: center; margin: 0; }
.points-explain .price-extras { grid-template-columns: repeat(3, 1fr); margin-top: var(--s3); }
.points-explain .price-extras b { font-size: 1.35rem; }
.price-card .pc-eq { display: block; width: 100%; font-size: 0.78rem; color: var(--subtle); }
@media (max-width: 720px) { .points-explain .price-extras { grid-template-columns: 1fr; } }