/* Mifumo preview components. Tokens live in mifumo-preview-tokens.css. */
.preview, .preview *, .preview *::before, .preview *::after { box-sizing: border-box; }
.preview { font-family: var(--preview-font); font-size: var(--preview-t14); line-height: 1.5; color: var(--preview-text); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
body.preview { margin: 0; background: var(--preview-bg); min-height: 100vh; }
.preview a { color: inherit; }
.preview h1, .preview h2, .preview h3, .preview p { margin: 0; }
.preview .num { font-variant-numeric: tabular-nums; }
.preview .muted { color: var(--preview-muted); }
.preview .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.preview .wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--preview-gutter); }
.preview .wrap.narrow { max-width: 560px; }
.preview :focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--preview-ring) 45%, transparent); }
.preview a:focus-visible { border-radius: 4px; }
.preview svg.ic { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Top bar */
.preview .topbar { display: flex; align-items: center; justify-content: space-between; height: 56px; border-bottom: 1px solid var(--preview-border); }
.preview .brand { display: inline-flex; align-items: center; gap: var(--preview-s2); font-weight: 600; font-size: var(--preview-t16); text-decoration: none; }
.preview .brand i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--preview-accent); }
.preview .topnav { display: flex; align-items: center; gap: var(--preview-s4); font-size: var(--preview-t13); }
.preview .topnav a { color: var(--preview-muted); text-decoration: none; min-height: var(--preview-touch); display: inline-flex; align-items: center; }
.preview .topnav a:hover { color: var(--preview-text); }

/* Buttons (shadcn/ui Button: default, outline, destructive, sm) */
.preview .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--preview-s2); height: 36px; padding: 0 var(--preview-s4);
  border-radius: var(--preview-r-control); border: 1px solid var(--preview-border-strong); background: transparent; color: var(--preview-text);
  font: 500 var(--preview-t14)/1 var(--preview-font); text-decoration: none; cursor: pointer; white-space: nowrap; box-shadow: var(--preview-shadow-xs);
  transition: background .12s, border-color .12s, opacity .12s; }
.preview .btn:hover { background: var(--preview-raised); }
.preview .btn.primary { background: var(--preview-accent); border-color: var(--preview-accent); color: var(--preview-accent-ink); }
.preview .btn.primary:hover { background: var(--preview-accent); opacity: .9; }
.preview .btn.danger { color: var(--preview-danger); border-color: var(--preview-danger); background: transparent; }
.preview .btn.danger:hover { background: var(--preview-danger-soft); }
.preview .btn.sm { height: 32px; padding: 0 var(--preview-s3); font-size: var(--preview-t13); }
.preview .btn.block { width: 100%; }
.preview .btn[disabled] { opacity: .5; pointer-events: none; }
@media (pointer: coarse) { .preview .btn, .preview .btn.sm { min-height: var(--preview-touch); } }

/* Forms */
.preview .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--preview-s4); }
.preview .field > label, .preview .lbl { font-size: var(--preview-t13); font-weight: 500; }
.preview .input, .preview select, .preview textarea { width: 100%; min-height: 36px; padding: 6px var(--preview-s3); font: 400 16px/1.4 var(--preview-font);
  color: var(--preview-text); background: transparent; border: 1px solid var(--preview-border-strong); border-radius: var(--preview-r-control); box-shadow: var(--preview-shadow-xs); }
@media (min-width: 768px) { .preview .input, .preview select, .preview textarea { font-size: var(--preview-t14); } }
@media (pointer: coarse) { .preview .input, .preview select { min-height: var(--preview-touch); } }
.preview textarea { min-height: 88px; resize: vertical; }
.preview .input:focus-visible, .preview select:focus-visible, .preview textarea:focus-visible { outline: none; border-color: var(--preview-ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--preview-ring) 40%, transparent); }
.preview .input[aria-invalid="true"] { border-color: var(--preview-danger); }
.preview .err { color: var(--preview-danger); font-size: var(--preview-t13); min-height: 0; }
.preview .hint { color: var(--preview-muted); font-size: var(--preview-t12); }
.preview .prefix { display: flex; }
.preview .prefix > span { display: inline-flex; align-items: center; padding: 0 var(--preview-s3); border: 1px solid var(--preview-border-strong); border-right: 0;
  border-radius: var(--preview-r-control) 0 0 var(--preview-r-control); background: var(--preview-raised); color: var(--preview-muted); font-size: 16px; }
.preview .prefix > .input { border-radius: 0 var(--preview-r-control) var(--preview-r-control) 0; }
.preview .check { display: flex; align-items: center; gap: var(--preview-s2); min-height: var(--preview-touch); cursor: pointer; font-size: var(--preview-t14); }
.preview .check input { width: 18px; height: 18px; accent-color: var(--preview-accent); }

/* Cards */
.preview .card { background: var(--preview-surface); color: var(--preview-text); border: 1px solid var(--preview-border); border-radius: var(--preview-r-card); padding: var(--preview-s6); box-shadow: var(--preview-shadow-sm); transition: border-color .12s, transform .12s; }
.preview a.card:hover, .preview .card.hoverable:hover { border-color: var(--preview-border-strong); transform: translateY(-1px); }
.preview .badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: var(--preview-r-control); font-size: var(--preview-t12); font-weight: 600; line-height: 1.33;
  background: var(--preview-raised); color: var(--preview-muted); border: 1px solid var(--preview-border); }
.preview .badge.accent { background: var(--preview-accent-soft); color: var(--preview-accent); border-color: transparent; }
.preview .badge.ok { background: var(--preview-success-soft); color: var(--preview-success); border-color: transparent; }
.preview .badge.warn { background: var(--preview-warn-soft); color: var(--preview-warn); border-color: transparent; }
.preview .badge.bad { background: var(--preview-danger-soft); color: var(--preview-danger); border-color: transparent; }
.preview .price { font-size: var(--preview-t24); font-weight: 600; letter-spacing: -.02em; }
.preview .price small { font-size: var(--preview-t13); font-weight: 400; color: var(--preview-muted); letter-spacing: 0; }
.preview .trust { color: var(--preview-muted); font-size: var(--preview-t13); }

/* Signup */
.preview .progress { height: 4px; border-radius: var(--preview-r-pill); background: var(--preview-raised); overflow: hidden; }
.preview .progress > i { display: block; height: 100%; background: var(--preview-accent); transition: width .2s; }
.preview .steps { display: flex; justify-content: space-between; font-size: var(--preview-t13); margin: var(--preview-s6) 0 var(--preview-s2); }
.preview .plan-opt { position: relative; display: block; cursor: pointer; }
.preview .plan-opt input { position: absolute; opacity: 0; inset: 0; }
.preview .plan-opt .card { display: flex; justify-content: space-between; gap: var(--preview-s3); padding: var(--preview-s4); min-height: var(--preview-touch); }
.preview .plan-opt input:checked + .card { border-color: var(--preview-accent); box-shadow: 0 0 0 1px var(--preview-accent); background: var(--preview-accent-soft); }
.preview .plan-opt input:focus-visible + .card { outline: 2px solid var(--preview-ring); outline-offset: 2px; }
.preview .stack { display: grid; gap: var(--preview-s2); }
.preview .hint-box { border: 1px solid var(--preview-accent); background: var(--preview-accent-soft); border-radius: var(--preview-r-control); padding: var(--preview-s3) var(--preview-s4); margin-top: var(--preview-s3); font-size: var(--preview-t14); }
.preview .hint-box .row { display: flex; gap: var(--preview-s2); margin-top: var(--preview-s2); flex-wrap: wrap; }
.preview .total { display: flex; justify-content: space-between; align-items: baseline; padding-top: var(--preview-s3); margin-top: var(--preview-s3); border-top: 1px solid var(--preview-border); font-weight: 600; }
.preview .actions { display: flex; gap: var(--preview-s2); justify-content: space-between; margin-top: var(--preview-s6); }
.preview [hidden] { display: none !important; }

/* Pricing */
.preview .hero { text-align: center; padding-block: var(--preview-s16) var(--preview-s10); }
.preview .hero h1 { font-size: var(--preview-t32); line-height: 1.15; font-weight: 600; letter-spacing: -.025em; max-width: 20ch; margin: 0 auto var(--preview-s3); }
.preview .hero p { color: var(--preview-muted); font-size: var(--preview-t16); max-width: 48ch; margin: 0 auto var(--preview-s3); }
.preview .grid { display: grid; gap: var(--preview-s4); grid-template-columns: 1fr; }
.preview .section { padding-block: var(--preview-s8); }
.preview .section > h2 { font-size: var(--preview-t24); font-weight: 600; letter-spacing: -.02em; margin-bottom: var(--preview-s1); }
.preview .section > .lead { color: var(--preview-muted); margin-bottom: var(--preview-s5); }
.preview .plan { display: flex; flex-direction: column; gap: var(--preview-s3); }
.preview .plan .head { display: flex; justify-content: space-between; align-items: center; gap: var(--preview-s2); }
.preview .plan h3 { font-size: var(--preview-t16); font-weight: 600; }
.preview .plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--preview-s2); font-size: var(--preview-t13); flex: 1; }
.preview .plan li { display: flex; gap: var(--preview-s2); align-items: flex-start; }
.preview .plan li .ic { color: var(--preview-accent); flex: none; width: 16px; height: 16px; margin-block: calc((1lh - 16px) / 2); }
.preview .plan.group { border-style: dashed; }
.preview .modcard { display: flex; flex-direction: column; gap: var(--preview-s2); }
.preview .modcard .ico { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: var(--preview-r-control); background: var(--preview-raised); color: var(--preview-accent); }
.preview footer.site { border-top: 1px solid var(--preview-border); padding-block: var(--preview-s8); margin-top: var(--preview-s8); display: flex; flex-wrap: wrap; gap: var(--preview-s3); justify-content: space-between; }
@media (min-width: 640px) {
  .preview .grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
  .preview .grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .preview .grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 960px) {
  .preview .grid.plans { grid-template-columns: repeat(4, 1fr); }
}

/* Admin */
.preview .admin-head { display: flex; justify-content: space-between; align-items: center; gap: var(--preview-s3); flex-wrap: wrap; margin-bottom: var(--preview-s4); }
.preview .admin-head h1 { font-size: var(--preview-t24); font-weight: 600; letter-spacing: -.02em; }
.preview .tabs { display: flex; gap: var(--preview-s1); border-bottom: 1px solid var(--preview-border); margin-bottom: var(--preview-s4); overflow-x: auto; }
.preview .tabs a { padding: 0 var(--preview-s3); min-height: var(--preview-touch); display: inline-flex; align-items: center; color: var(--preview-muted); text-decoration: none; border-bottom: 2px solid transparent; font-size: var(--preview-t14); white-space: nowrap; }
.preview .tabs a[aria-current="page"] { color: var(--preview-text); border-color: var(--preview-accent); }
.preview .toolbar { display: flex; gap: var(--preview-s2); margin-bottom: var(--preview-s3); flex-wrap: wrap; }
.preview .toolbar .input, .preview .toolbar select { width: auto; min-height: 36px; font-size: var(--preview-t14); flex: 1 1 200px; max-width: 320px; }
.preview .tablewrap { border: 1px solid var(--preview-border); border-radius: var(--preview-r-card); overflow-x: auto; }
.preview table.t { width: 100%; border-collapse: collapse; font-size: var(--preview-t13); }
.preview table.t th { text-align: left; font-weight: 500; color: var(--preview-muted); padding: 0 var(--preview-s3); height: 40px; border-bottom: 1px solid var(--preview-border); white-space: nowrap; }
.preview table.t td { padding: 0 var(--preview-s3); height: var(--preview-row); border-bottom: 1px solid var(--preview-border); white-space: nowrap; }
.preview table.t tr:last-child td { border-bottom: 0; }
.preview table.t tbody tr:hover { background: color-mix(in srgb, var(--preview-raised) 50%, transparent); }
.preview table.t .r { text-align: right; }
.preview .empty { padding: var(--preview-s10) var(--preview-s4); text-align: center; color: var(--preview-muted); }
.preview .empty strong { display: block; color: var(--preview-text); margin-bottom: var(--preview-s1); font-size: var(--preview-t16); }
.preview .toggle { position: relative; width: 32px; height: 18px; border-radius: var(--preview-r-pill); background: var(--preview-border-strong); border: 0; cursor: pointer; padding: 0; }
.preview .toggle::after { content: ""; position: absolute; top: 1px; left: 1px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .12s; }
.preview .toggle[aria-checked="true"] { background: var(--preview-accent); }
.preview .toggle[aria-checked="true"]::after { transform: translateX(14px); }
.preview .flash { padding: var(--preview-s3) var(--preview-s4); border-radius: var(--preview-r-control); margin-bottom: var(--preview-s4); font-size: var(--preview-t14); border: 1px solid; }
.preview .flash.ok { color: var(--preview-success); background: var(--preview-success-soft); border-color: transparent; }
.preview .flash.bad { color: var(--preview-danger); background: var(--preview-danger-soft); border-color: transparent; }
.preview .scrim { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 50; }
.preview .slideover { position: fixed; top: 0; right: 0; bottom: 0; width: min(480px, 100vw); background: var(--preview-bg); border-left: 1px solid var(--preview-border); z-index: 51; display: flex; flex-direction: column; }
.preview .slideover > header { display: flex; justify-content: space-between; align-items: center; padding: var(--preview-s4); border-bottom: 1px solid var(--preview-border); font-weight: 600; font-size: var(--preview-t16); }
.preview .slideover > form, .preview .slideover > .body { padding: var(--preview-s4); overflow-y: auto; flex: 1; }
.preview .slideover > footer { padding: var(--preview-s3) var(--preview-s4); border-top: 1px solid var(--preview-border); display: flex; gap: var(--preview-s2); justify-content: flex-end; }
.preview dialog { background: var(--preview-bg); color: var(--preview-text); border: 1px solid var(--preview-border-strong); border-radius: var(--preview-r-card); padding: var(--preview-s5); max-width: 420px; width: calc(100vw - 32px); }
.preview dialog::backdrop { background: rgba(0,0,0,.55); }
.preview dialog h2 { font-size: var(--preview-t16); margin-bottom: var(--preview-s2); }
.preview dialog .actions { justify-content: flex-end; }
@media (prefers-reduced-motion: reduce) { .preview * { transition: none !important; } .preview a.card:hover, .preview .card.hoverable:hover { transform: none; } }

/* Module detail page */
.preview .crumb { display: inline-flex; align-items: center; min-height: var(--preview-touch); color: var(--preview-muted); font-size: var(--preview-t13); text-decoration: none; }
.preview .crumb:hover { color: var(--preview-text); }
.preview .mod-head { display: flex; gap: var(--preview-s4); align-items: flex-start; padding: var(--preview-s4) 0 var(--preview-s8); }
.preview .mod-head .ico { display: inline-flex; flex: none; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: var(--preview-r-card); background: var(--preview-accent-soft); color: var(--preview-accent); }
.preview .mod-head .ico .ic { width: 24px; height: 24px; }
.preview .mod-head h1 { font-size: var(--preview-t32); line-height: 1.15; font-weight: 600; letter-spacing: -.025em; }
.preview .mod-head p { color: var(--preview-muted); font-size: var(--preview-t16); margin-top: var(--preview-s2); max-width: 52ch; }
.preview .mod-layout { display: grid; gap: var(--preview-s8); grid-template-columns: 1fr; padding-bottom: var(--preview-s8); }
.preview .mod-aside { order: -1; }
.preview .buy { position: static; }
.preview .buy .price { margin: var(--preview-s2) 0 var(--preview-s4); }
.preview .buy hr { border: 0; border-top: 1px solid var(--preview-border); margin: var(--preview-s4) 0; }
.preview .buy ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.preview .buy li a { display: flex; justify-content: space-between; gap: var(--preview-s2); min-height: 36px; align-items: center; font-size: var(--preview-t13); color: var(--preview-muted); text-decoration: none; }
.preview .buy li a:hover { color: var(--preview-text); }
.preview .overview { font-size: var(--preview-t16); line-height: 1.65; margin-bottom: var(--preview-s8); max-width: 62ch; }
.preview .fgroup { padding: var(--preview-s5) 0; border-top: 1px solid var(--preview-border); display: grid; gap: var(--preview-s3); }
.preview .fgroup h2 { font-size: var(--preview-t14); font-weight: 600; }
.preview .fgroup ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--preview-s3) var(--preview-s6); grid-template-columns: 1fr; }
.preview .fgroup li { display: flex; gap: var(--preview-s2); align-items: flex-start; font-size: var(--preview-t14); color: var(--preview-muted); line-height: 1.5; }
.preview .fgroup li .ic { color: var(--preview-accent); flex: none; width: 16px; height: 16px; margin-block: calc((1lh - 16px) / 2); }
@media (min-width: 640px) { .preview .fgroup ul { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) {
  .preview .mod-layout { grid-template-columns: minmax(0, 1fr) 300px; }
  .preview .mod-aside { order: 0; }
  .preview .buy { position: sticky; top: var(--preview-s6); }
}
.preview .card .more { font-size: var(--preview-t13); color: var(--preview-muted); text-decoration: none; }
.preview .card .more:hover { color: var(--preview-text); text-decoration: underline; }

/* Plan comparison */
.preview .cmp-wrap { border: 1px solid var(--preview-border); border-radius: var(--preview-r-card); overflow-x: auto; background: var(--preview-surface); }
.preview table.cmp { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; font-size: var(--preview-t14); }
.preview table.cmp th, .preview table.cmp td { padding: var(--preview-s3) var(--preview-s4); border-bottom: 1px solid var(--preview-border); text-align: center; vertical-align: middle; }
.preview table.cmp tr > :first-child { text-align: left; position: sticky; left: 0; background: var(--preview-surface); z-index: 1; min-width: 200px; font-weight: 500; }
.preview table.cmp thead th { vertical-align: top; padding-top: var(--preview-s5); padding-bottom: var(--preview-s4); font-weight: 400; }
.preview table.cmp thead th .name { font-weight: 600; font-size: var(--preview-t16); display: block; }
.preview table.cmp thead th .price { font-size: var(--preview-t16); margin: var(--preview-s1) 0 var(--preview-s3); display: block; }
.preview table.cmp tbody th[scope="rowgroup"], .preview table.cmp tr.grp > * { background: var(--preview-raised); color: var(--preview-muted); font-size: var(--preview-t12); font-weight: 600; text-align: left; padding-top: var(--preview-s2); padding-bottom: var(--preview-s2); }
.preview table.cmp tr:last-child > * { border-bottom: 0; }
.preview table.cmp .yes { color: var(--preview-accent); }
.preview table.cmp .addon { color: var(--preview-muted); font-size: var(--preview-t13); }
.preview table.cmp .addon a { color: inherit; }
.preview table.cmp .feat { font-weight: 400; }

/* Plan picker for the comparison */
.preview .cmp-pick { border: 0; padding: 0; margin: 0 0 var(--preview-s4); }
.preview .cmp-pick legend { margin-bottom: var(--preview-s2); }
.preview .chips { display: flex; flex-wrap: wrap; gap: var(--preview-s2); }
.preview .chip { position: relative; cursor: pointer; }
.preview .chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.preview .chip span { display: inline-flex; align-items: center; min-height: var(--preview-touch); padding: 0 var(--preview-s4); border: 1px solid var(--preview-border-strong); border-radius: var(--preview-r-control); font-size: var(--preview-t14); font-weight: 500; background: transparent; }
.preview .chip input:checked + span { background: var(--preview-accent-soft); border-color: var(--preview-accent); color: var(--preview-accent); }
.preview .chip input:focus-visible + span { box-shadow: 0 0 0 3px color-mix(in srgb, var(--preview-ring) 45%, transparent); }
.preview [data-plan][hidden] { display: none; }
@media (max-width: 639px) {
  .preview table.cmp.cmp-few { min-width: 0; table-layout: fixed; }
  .preview table.cmp th, .preview table.cmp td { padding: var(--preview-s3) var(--preview-s2); font-size: var(--preview-t13); }
  .preview table.cmp tr > :first-child { min-width: 0; width: 38%; position: static; }
  .preview table.cmp thead th .name { font-size: var(--preview-t14); }
  .preview table.cmp thead th .btn { width: 100%; padding: 0 var(--preview-s2); }
}

/* Hero shader background */
.preview .hero { position: relative; overflow: hidden; isolation: isolate; }
.preview .hero > * { position: relative; z-index: 1; }
.preview canvas.hero-fx { position: absolute !important; inset: 0; width: 100%; height: 100%; z-index: 0 !important; pointer-events: none; }
/* Feather the shader into the page so the hero has no visible box edge */
.preview canvas.hero-fx { -webkit-mask-image: radial-gradient(ellipse 75% 100% at 50% 0%, #000 35%, transparent 100%); mask-image: radial-gradient(ellipse 75% 100% at 50% 0%, #000 35%, transparent 100%); }

/* Phones: keep the top bar inside the viewport and never allow sideways page scroll */
.preview { overflow-x: hidden; }
.preview .topbar { gap: var(--preview-s3); }
.preview .brand { flex: none; }
.preview .topnav { min-width: 0; gap: var(--preview-s3); }
@media (max-width: 520px) {
  .preview .topnav .nav-opt { display: none; }
  .preview .topnav { gap: var(--preview-s4); }
}
.preview img, .preview svg, .preview canvas, .preview table { max-width: 100%; }
.preview .price, .preview h1, .preview h2, .preview h3, .preview p { overflow-wrap: anywhere; }

/* Compare table: keep prices and add-on amounts from breaking mid-number */
.preview .nw { white-space: nowrap; }
@media (max-width: 639px) { .preview table.cmp thead th .price { font-size: var(--preview-t14); white-space: nowrap; } .preview table.cmp thead th .price small { font-size: var(--preview-t12); } }
/* Step headings take focus for screen readers; no ring needed around them */
.preview h1[tabindex="-1"]:focus, .preview h1[tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }

/* ---- Hercules-style layer: floating nav, gradient headline, soft cards ---- */
.preview .topbar { border-bottom: 0; height: 64px; position: sticky; top: 8px; z-index: 30; margin-top: 8px; padding-inline: var(--preview-s4);
  border-radius: 16px; border: 1px solid transparent; transition: background .2s, border-color .2s, backdrop-filter .2s; }
.preview .topbar { background: color-mix(in srgb, var(--preview-bg) 78%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-color: var(--preview-border); }
.preview .brand { font-weight: 700; letter-spacing: -.025em; font-size: 20px; }
.preview .topnav a:not(.btn) { padding: 0 var(--preview-s3); border-radius: var(--preview-r-control); min-height: 32px; transition: background .15s, color .15s; }
.preview .topnav a:not(.btn):hover { background: var(--preview-accent-soft); color: var(--preview-accent); }
.preview .btn { font-weight: 500; transition: background .15s, border-color .15s, color .15s, box-shadow .15s; }
.preview .btn:hover { background: var(--preview-accent-soft); border-color: color-mix(in srgb, var(--preview-accent) 40%, var(--preview-border)); color: var(--preview-accent); }
.preview .btn.primary:hover { background: color-mix(in srgb, var(--preview-accent) 88%, #000); border-color: transparent; color: var(--preview-accent-ink); opacity: 1; }
.preview .card { box-shadow: var(--preview-shadow-xs); }
.preview a.card:hover, .preview .card.hoverable:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -14px rgb(0 0 0 / .25); }
.preview .hero { padding-block: 96px 56px; }
.preview .hero h1 { font-size: clamp(2.25rem, 5vw, 3.25rem); font-weight: 600; max-width: 18ch; }
.preview .hero p { font-size: 18px; font-weight: 500; max-width: 52ch; }
.preview .grad { display: inline-block; background: linear-gradient(to right, var(--preview-accent), color-mix(in srgb, var(--preview-accent) 45%, #7d7d7d));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.preview .section > h2 { font-size: 28px; }
.preview .badge { border-radius: var(--preview-r-pill); }
.preview .chip span { border-radius: var(--preview-r-pill); }
.preview .tablewrap, .preview .cmp-wrap { border-radius: var(--preview-r-card); box-shadow: var(--preview-shadow-xs); }
.preview .plan.hoverable { transition: transform .2s, box-shadow .2s, border-color .2s; }

/* Toggle switch for public-page .check rows (card-style plan/chip pickers keep their own look). */
.preview .check input[type="checkbox"]{
  --button-width:3.5em; --button-height:2em; --toggle-diameter:1.5em;
  --button-toggle-offset:calc((var(--button-height) - var(--toggle-diameter)) / 2);
  --toggle-shadow-offset:10px; --toggle-wider:3em;
  --color-grey:var(--preview-border-strong,#cfcfcf); --color-green:var(--preview-accent,#252525);
  -webkit-appearance:none;appearance:none;
  position:relative;display:inline-block;flex:none;vertical-align:middle;
  font-size:12px;width:var(--button-width)!important;height:var(--button-height)!important;
  margin:0;padding:0;border:0;cursor:pointer;
  background-color:var(--color-grey);border-radius:calc(var(--button-height) / 2);
  transition:.3s all ease-in-out;
}
.preview .check input[type="checkbox"]::after{
  content:"";display:inline-block;position:absolute;
  width:var(--toggle-diameter);height:var(--toggle-diameter);
  top:var(--button-toggle-offset);left:0;
  background-color:#fff;border-radius:calc(var(--toggle-diameter) / 2);
  transform:translateX(var(--button-toggle-offset));
  box-shadow:var(--toggle-shadow-offset) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0,0,0,.1);
  transition:.3s all ease-in-out;
}
.preview .check input[type="checkbox"]:checked{background-color:var(--color-green)}
.preview .check input[type="checkbox"]:checked::after{
  transform:translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)));
  box-shadow:calc(var(--toggle-shadow-offset) * -1) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0,0,0,.1);
}
.preview .check input[type="checkbox"]:active::after{width:var(--toggle-wider)}
.preview .check input[type="checkbox"]:checked:active::after{
  transform:translateX(calc(var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset)));
}
.preview .check input[type="checkbox"]:disabled{opacity:.5;cursor:not-allowed}
.preview .check input[type="checkbox"]:focus-visible{outline:2px solid var(--color-green);outline-offset:2px}
.preview .check input[type="checkbox"]:checked::after{background-color:var(--preview-accent-ink,#fff)}

/* Animations and transitions are switched off everywhere (CSS keyframes, transitions, smooth scrolling). */
*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}