/* ContextWire's working pages: activate without internet, buy, the key after paying, the
   licence terms (/contextwire/activate/, buy/, thanks/, terms/). Loaded after style.css and
   uses its tokens and buttons. Counters at a post office, not posters: one column, big
   fields, nothing that moves. */

.act { background: var(--paper) var(--grain); }
.act [hidden] { display: none !important; }   /* .btn sets a display of its own */
.act__main { width: min(46rem, 100% - 2.5rem); margin-inline: auto; padding-block: clamp(6rem, 12vw, 8rem) 4rem; }
.act__kicker { color: var(--pink-lo); }
.act__title { margin-top: 1.4rem; font: 400 clamp(2.4rem, 6vw, 4rem)/.98 var(--display); letter-spacing: -.008em; text-wrap: balance; }
.act__lede { margin-top: 1.2rem; font-size: clamp(1.15rem, 1.9vw, 1.35rem); line-height: 1.45; max-width: 44ch; }

.act__steps { margin: 2.2rem 0 0; padding: 0 0 0 1.4rem; display: grid; gap: .7rem; max-width: 62ch; }
.act__steps li::marker { font-family: var(--type); }

.act__card { margin-top: 2.6rem; padding: 1.6rem clamp(1.1rem, 3vw, 1.9rem) 1.8rem; background: var(--paper-hi); border: 3px solid var(--ink); box-shadow: .5rem .5rem 0 var(--ink); }
.act__card h2, .act__fine h2 { font: 400 1.5rem/1.1 var(--display); letter-spacing: .01em; }
.act__card label { display: block; margin-top: 1.3rem; font-weight: 700; }
.act__card label span { display: block; font-weight: 400; font-size: .95rem; color: rgb(7 7 5 / .68); }
.act__card textarea, .act__card input[type="text"], .act__card input[type="email"], .act__card input[type="tel"], .act__card input[type="number"] {
  display: block; width: 100%; margin-top: .45rem; padding: .6rem .75rem;
  font: 400 .95rem/1.45 "Cascadia Code", Consolas, monospace; color: var(--ink);
  background: #fff; border: 3px solid var(--ink); border-radius: 0; word-break: break-all;
}
.act__card textarea { resize: vertical; min-height: 6.5rem; }
.act__card textarea[readonly] { background: var(--paper); min-height: 5.5rem; }
.act__card textarea::placeholder, .act__card input::placeholder { color: rgb(7 7 5 / .4); }
.act__card :is(textarea, input, button):focus-visible { outline: 3px solid var(--pink-lo); outline-offset: 2px; }
.act__check { display: flex !important; gap: .7rem; align-items: flex-start; font-weight: 400 !important; }
.act__check[hidden] { display: none !important; }
.act__check a, .act__fine a, .act__terms a { text-decoration-thickness: 2px; text-underline-offset: 3px; }
.act__agree { margin-top: 1.6rem !important; padding: .9rem 1rem; background: var(--yellow); border: 3px solid var(--ink); }
.act__card input[type="number"] { width: 8rem; }
.act__price { margin-top: 1.6rem; font: 400 clamp(1.2rem, 2.4vw, 1.5rem)/1.3 var(--hand); text-transform: uppercase; letter-spacing: .05em; min-height: 1.3em; }
.act__key { margin-top: 1rem; padding: 1rem .8rem; text-align: center; font: 700 clamp(1.05rem, 3.4vw, 1.5rem)/1.3 "Cascadia Code", Consolas, monospace; letter-spacing: .04em; word-break: break-all; background: var(--yellow); border: 3px solid var(--ink); user-select: all; }
.act__receipt { margin-top: 1rem; font-size: .95rem; color: rgb(7 7 5 / .7); }
.act__card .act__steps { margin-top: 1.2rem; }
.act__card .act__what { margin-top: 1rem; }
.act__terms { margin-top: 2.4rem; max-width: 66ch; }
.act__terms h2 { margin-top: 2.2rem; font: 400 1.4rem/1.15 var(--display); letter-spacing: .01em; scroll-margin-top: 1rem; }
.act__terms p, .act__terms ul { margin-top: .8rem; }
.act__terms ul { padding-left: 1.3rem; display: grid; gap: .45rem; }
.act__terms #no-refunds + p { padding: .9rem 1rem; background: var(--yellow); border: 3px solid var(--ink); }
.act__check input { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .2rem; accent-color: var(--ink); }
.act__check span { display: inline !important; font-size: 1rem !important; color: var(--ink) !important; }
.act__go { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.4rem; }
.act__go .btn { border: 0; cursor: pointer; }
.act__go .btn[disabled] { opacity: .55; cursor: progress; }
.act__msg { flex: 1 1 14rem; margin-top: 1.4rem; min-height: 1.5em; font-weight: 700; }
.act__msg.is-bad { color: #9c1140; }

.act__res { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 2px dashed rgb(7 7 5 / .35); }
.act__res:first-child { border-top: 0; padding-top: 0; margin-top: 1rem; }
.act__what { font-weight: 700; }
.act__res--bad .act__what { color: #9c1140; }
.act__row { display: flex; flex-wrap: wrap; gap: .7rem 1rem; margin-top: .7rem; }
.act__row button { font: 700 1rem/1.2 var(--body); padding: .5rem .9rem; background: var(--paper-hi); border: 3px solid var(--ink); border-radius: 0; cursor: pointer; }
.act__row button:hover { background: var(--yellow); }

.act__fine { margin-top: 3rem; max-width: 62ch; font-size: 1rem; }
.act__fine p { margin-top: .8rem; }

.act__foot { background: var(--ink); color: rgb(247 241 228 / .7); padding: 2rem 0 2.4rem; font-size: .88rem; }
.act__foot p { width: min(46rem, 100% - 2.5rem); margin-inline: auto; }
.act__foot p + p, .act__foot nav + p { margin-top: .7rem; }
.act__policies { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; width: min(46rem, 100% - 2.5rem); margin: .8rem auto 0; }
.act__policies a { color: var(--paper-hi); }
.act__card { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1.2rem; margin-top: 1rem; padding: 1.1rem 1.3rem; border: 2px solid var(--ink); background: var(--paper-hi); }
.act__card dt { font-weight: 800; }
.act__card dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 30rem) { .act__card { grid-template-columns: 1fr; gap: .1rem; } .act__card dd + dt { margin-top: .5rem; } }
.act__foot .act__init { font: 400 1.05rem/1.2 var(--hand); text-transform: uppercase; letter-spacing: .07em; color: var(--paper-hi); }

@media (max-width: 30rem) {
  .act__card { box-shadow: .3rem .3rem 0 var(--ink); }
  .act__go .btn { width: 100%; text-align: center; }
}