/* PrintWisp storefront: motion + the sign-up form (4 Oct 2026).
   The owner: "go with direction A and build it .. add animations to it".
   Everything is visible without JavaScript; reveals only hide content once pw-motion.js has run
   (html.pw-js), and prefers-reduced-motion switches all of it off (site.css also kills animation). */

/* ── the hero light ─────────────────────────────────────────────────────────── */
@keyframes pw-drift {
  0%   { transform: rotate(-16deg) translate3d(-6%, 0, 0) scale(1); opacity: .62; }
  50%  { transform: rotate(-11deg) translate3d(5%, -8%, 0) scale(1.1); opacity: .85; }
  100% { transform: rotate(-19deg) translate3d(-2%, 6%, 0) scale(1.02); opacity: .7; }
}
@keyframes pw-glow {
  0%, 100% { opacity: 1; }
  50%      { opacity: .7; }
}
@keyframes pw-flow { to { background-position: 200% 0; } }
.hero__ribbon { animation: pw-drift 16s ease-in-out infinite alternate; will-change: transform, opacity; }
.hero::before { animation: pw-glow 9s ease-in-out infinite; }
.hero::after, .footer::before { background-size: 200% 100%; animation: pw-flow 6s linear infinite; }

/* ── the hero arrives ────────────────────────────────────────────────────────── */
@keyframes pw-rise { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } }
@keyframes pw-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -8px, 0); } }
.pw-js .hero__copy > * { opacity: 0; animation: pw-rise .8s cubic-bezier(.2, .7, .2, 1) forwards; }
.pw-js .hero__copy > *:nth-child(1) { animation-delay: .05s; }
.pw-js .hero__copy > *:nth-child(2) { animation-delay: .18s; }
.pw-js .hero__copy > *:nth-child(3) { animation-delay: .3s; }
.pw-js .hero__copy > *:nth-child(4) { animation-delay: .42s; }
.pw-js .hero__copy > *:nth-child(5) { animation-delay: .54s; }
.pw-js .hero__visual { opacity: 0; animation: pw-rise 1s cubic-bezier(.2, .7, .2, 1) .35s forwards; }
.hero__visual .device { animation: pw-float 7s ease-in-out 1.4s infinite; }

/* ── the designer in the hero, alive ─────────────────────────────────────────── */
.stage-frame .frame { transition: filter .7s ease; }
.stage-frame .photo { transition: opacity .45s ease; }
.stage-frame .photo.is-swapping { opacity: 0; }
.stage-frame[data-frame="black"] .frame { filter: grayscale(1) brightness(.28) contrast(1.2) drop-shadow(2px 5px 7px rgba(20,14,8,.32)); }
.stage-frame[data-frame="white"] .frame { filter: grayscale(1) brightness(1.9) contrast(.85) drop-shadow(2px 5px 7px rgba(20,14,8,.32)); }
.designer .chip { transition: background-color .3s, border-color .3s, box-shadow .3s; }
.designer__thumbs img { transition: outline-color .3s, transform .3s; }

/* ── sections rise in as they arrive ─────────────────────────────────────────── */
/* VISIBLE AT REST (12 Oct 2026): a section rises a little as it arrives but is never invisible -- parked at opacity 0, the
   FAQ and the closing call to action stayed blank in link previews, full-page captures and fast scrolls. */
.pw-js .pw-reveal { opacity: .35; transform: translate3d(0, 18px, 0); transition: opacity .6s cubic-bezier(.2, .7, .2, 1), transform .75s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--pw-d, 0s); }
.pw-js .pw-reveal.is-in { opacity: 1; transform: none; }

/* ── buttons with a light sheen, header firming on scroll ────────────────────── */
.btn--hero, .btn--primary { position: relative; overflow: hidden; isolation: isolate; }
.btn--hero::after, .btn--primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s ease;
}
.btn--primary::after { background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%); }
.btn--hero:hover::after, .btn--primary:hover::after { transform: translateX(120%); }
.header { transition: background-color .3s, box-shadow .3s; }
.header.is-scrolled { box-shadow: 0 10px 30px -18px rgba(0,0,0,.55); }
/* at rest the light page sits behind the bar (not the hero), so it is solid navy; frosted once scrolling */
.header--dark { background: var(--navy); }
.header--dark.is-scrolled { background: rgba(15,23,51,.9); }

/* cards lift a touch on hover (pointer devices only) */
@media (hover: hover) {
  .product, .offer, .plan { transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s; }
  .product:hover, .offer:hover, .plan:hover { transform: translate3d(0, -4px, 0); }
}

/* the calculator's totals pulse when they change */
@keyframes pw-pop { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }
.calc__plan .total.is-pop { animation: pw-pop .35s ease; display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  .pw-js .pw-reveal, .pw-js .hero__copy > *, .pw-js .hero__visual { opacity: 1 !important; transform: none !important; animation: none !important; }
  .hero__ribbon, .hero::before, .hero::after, .hero__visual .device { animation: none !important; }
}

/* ── sign-up and terms, in the storefront's design ───────────────────────────── */
.auth { position: relative; overflow: hidden; background: var(--navy); color: #fff; padding: 40px 0 64px; isolation: isolate; }
.auth::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(800px 420px at 85% 10%, rgba(96,55,229,.35), transparent 60%), radial-gradient(600px 380px at 10% 100%, rgba(42,171,254,.18), transparent 60%); }
.auth__grid { display: grid; gap: 28px; align-items: start; }
@media (min-width: 960px) { .auth__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; } }
.auth__card { background: var(--surface); color: var(--ink); border-radius: var(--radius-l); padding: 22px; box-shadow: var(--shadow-device); display: grid; gap: 16px; min-width: 0; }
@media (min-width: 640px) { .auth__card { padding: 32px; } }
.auth__card h1 { font: var(--display-weight) clamp(26px, 5vw, 34px)/1.1 var(--font-display); letter-spacing: var(--display-track); margin: 0; }
.auth__aside h2 { color: #fff; font: 700 20px/1.25 var(--font-display); margin: 0 0 14px; }
.auth__aside ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.auth__aside li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; color: var(--on-navy-2); font-size: 15px; line-height: 1.5; }
.auth__aside li b { color: #fff; }
.auth__aside li i { width: 28px; height: 28px; border-radius: 8px; background: var(--ribbon); opacity: .9; }
.field { display: grid; gap: 6px; min-width: 0; }
.field--2 { display: grid; gap: 16px; }
@media (min-width: 540px) { .field--2 { grid-template-columns: 1fr 1fr; align-items: start; } }
.field label, .field legend { font-size: 14px; font-weight: 600; color: var(--ink); }
.field label small, .field legend small { font-weight: 400; color: var(--muted); margin-left: 6px; }
.input { width: 100%; box-sizing: border-box; min-height: var(--control); padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font: 16px/1.3 var(--font-body); color: var(--ink); background: #fff; transition: border-color .15s, box-shadow .15s; }
.input:hover { border-color: var(--ink-2); }
.input:focus { outline: none; border-color: var(--primary); box-shadow: var(--focus); }
.input[aria-invalid="true"] { border-color: var(--error); }
.help { font-size: 13px; color: var(--muted); margin: 0; }
.error { font-size: 13px; color: var(--error); margin: 0; }
.picker { display: grid; gap: 10px; }
.pick { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; transition: border-color .2s, box-shadow .2s, background-color .2s; }
.pick:hover { border-color: var(--ink-2); }
.pick:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); background: var(--primary-tint); }
.pick:has(input:focus-visible) { box-shadow: var(--focus); }
.pick input { accent-color: var(--primary); width: 18px; height: 18px; margin: 0; }
.pick__name { font-weight: 600; color: var(--ink); }
.pick__name small { display: block; font-weight: 400; color: var(--muted); font-size: 13px; }
.pick__price { text-align: right; font-size: 13px; color: var(--ink-2); }
.pick__price b { display: block; font-size: 15px; color: var(--ink); }
.check { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.check input { accent-color: var(--primary); width: 18px; height: 18px; margin: 2px 0 0; }
.fine { font-size: 12px; color: var(--muted); margin: 0; text-align: center; }
.prose { max-width: 760px; }
.prose h2 { font: 700 22px/1.25 var(--font-display); margin: 28px 0 8px; }
.prose p { color: var(--ink-2); line-height: 1.65; }
.prose ul { padding-left: 20px; color: var(--ink-2); line-height: 1.65; }
.prose li { margin: 6px 0; }
.prose li b, .prose p b { color: var(--ink); }
.prose .lead { margin-bottom: 18px; }
.prose .todo { white-space: normal; display: inline; }

/* ── legal pages (terms, privacy) ───────────────────────────────────────────── */
.legal { background: var(--surface); }
.legal__hero { background: var(--page); border-bottom: 1px solid var(--line); padding: 40px 0 28px; }
.legal__hero .h1 { margin: 6px 0 8px; font-size: clamp(32px, 5vw, 48px); }
.legal__hero .lead { max-width: 760px; margin: 12px 0 0; }
.legal__meta { color: var(--muted); font-size: 14px; margin: 0; }
.legal__grid { display: grid; gap: 28px; padding-top: 28px; padding-bottom: 64px; }
@media (min-width: 960px) { .legal__grid { grid-template-columns: 250px minmax(0, 760px); gap: 56px; } }
.legal__toc details { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--page); }
@media (min-width: 960px) { .legal__toc { position: sticky; top: 88px; align-self: start; max-height: calc(100vh - 110px); overflow: auto; } .legal__toc details { border: 0; background: none; padding: 0; } }
.legal__toc summary { font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); cursor: pointer; list-style: none; }
.legal__toc summary::-webkit-details-marker { display: none; }
.legal__toc ol { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 2px; font-size: 14px; color: var(--muted); }
.legal__toc a { display: block; padding: 3px 0; color: var(--ink-2); text-decoration: none; border-left: 2px solid transparent; padding-left: 8px; margin-left: -10px; }
.legal__toc a:hover { color: var(--primary); }
.legal__toc a.is-on { color: var(--primary); border-left-color: var(--primary); font-weight: 600; }
.legal__summary { border-radius: 16px; padding: 20px 22px; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--ribbon) border-box; border: 2px solid transparent; margin-bottom: 8px; }
.legal__summary h2 { font: 700 18px/1.3 var(--font-display); margin: 0 0 10px; }
.legal__summary ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--ink-2); line-height: 1.55; }
.legal__summary p { margin: 12px 0 0; font-size: 13px; color: var(--muted); }
.legal__sec { padding-top: 28px; scroll-margin-top: 84px; }
.legal__sec h2 { font: 700 22px/1.25 var(--font-display); letter-spacing: -.01em; margin: 0 0 10px; color: var(--ink); }
.legal__sec h2 span { color: var(--primary); margin-right: 4px; font-variant-numeric: tabular-nums; }
.legal__short { background: var(--primary-tint); border-radius: 10px; padding: 9px 12px; font-size: 14px; color: var(--ink); margin: 0 0 12px; }
.legal__short b { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); margin-right: 6px; }
.legal__sec p, .legal__sec li, .legal__sec dd { color: var(--ink-2); line-height: 1.7; font-size: 16px; }
.legal__sec ul { padding-left: 20px; }
.legal__sec li { margin: 6px 0; }
.legal__sec b { color: var(--ink); }
.legal__dl { display: grid; grid-template-columns: minmax(120px, 170px) 1fr; gap: 8px 16px; margin: 0; }
.legal__dl dt { font-weight: 600; color: var(--ink); }
.legal__dl dd { margin: 0; }
@media (max-width: 560px) { .legal__dl { grid-template-columns: 1fr; gap: 2px; } .legal__dl dd { margin-bottom: 8px; } }
.legal__table { overflow-x: auto; margin: 6px 0 14px; border: 1px solid var(--line); border-radius: 12px; }
.legal__table table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 520px; }
.legal__table th { text-align: left; background: var(--page); color: var(--ink); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.legal__table td { padding: 10px 12px; border-top: 1px solid var(--line); color: var(--ink-2); vertical-align: top; line-height: 1.5; }
.legal__table tr:first-child td { border-top: 0; }
.legal__foot { margin-top: 32px; font-size: 13px; color: var(--muted); }
.legal .todo { white-space: normal; }
@media print {
  .header, .footer, .legal__toc, .legal__meta a { display: none !important; }
  .legal__grid { display: block; padding: 0; }
  .legal__hero { background: none; border: 0; padding: 0 0 12px; }
  .legal__summary { border: 1px solid #999; background: none; }
  .legal__sec { break-inside: avoid-page; }
  .legal__table table { min-width: 0; }
}
.legal__grid { grid-template-columns: minmax(0, 1fr); }
.legal__grid > * { min-width: 0; }
@media (min-width: 960px) { .legal__grid { grid-template-columns: 250px minmax(0, 760px); } }