/* ==========================================================================
   smudges site pages: pricing, sign-up, sign-in, resets, checkout,
   and the homepage's pricing section. Built on main.css's tokens.
   ========================================================================== */
[hidden] { display: none !important; }
.btn--line { color: var(--ink); background: var(--card); border: 1.5px solid var(--ink); }
.btn--line:hover { box-shadow: 3px 3px 0 var(--ink); transform: translate(-1px, -1px); }
.btn--block { width: 100%; }
.btn[disabled], .btn.is-busy { opacity: .55; pointer-events: none; }
.btn.is-busy::after { content: ""; width: 14px; height: 14px; margin-left: 4px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.u { font-weight: 700; text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.page { padding-top: 120px; }
.section.page { padding-bottom: 40px; }
.lede { max-width: 60ch; margin-top: 22px; font-size: 19px; line-height: 1.55; color: var(--ink-2); }
.section--tight { padding-top: 0; }

/* ---------------------------------------------------------- plan controls and cards */
.price-ctl { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 22px; }
.seg2 { display: inline-flex; gap: 2px; padding: 4px; border-radius: 8px; background: var(--paper-2); }
.seg2 button { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 5px; font-size: 15px; font-weight: 700; color: var(--graphite); }
.seg2 button[aria-checked="true"] { color: var(--ink); background: var(--card); box-shadow: 0 1px 2px rgba(20, 21, 25, .12), 0 0 0 1px rgba(20, 21, 25, .06); }
.seg2 i { font: normal 600 10px/1 var(--f-mono); font-stretch: 87.5%; text-transform: uppercase; padding: 4px 6px; color: var(--ink); background: var(--signal); border-radius: 3px; }
.cur select { appearance: none; height: 40px; padding: 0 34px 0 14px; font: 600 14px/1 var(--f-sans); color: var(--ink); background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m5 6 3 3 3-3' fill='none' stroke='%2362646B' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") right 10px center / 16px no-repeat; border: 1px solid rgba(20, 21, 25, .22); border-radius: 6px; }
.plans-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 22px 20px 20px; background: var(--card); border: 1px solid rgba(20, 21, 25, .16); border-radius: 12px; box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 18px 36px -32px rgba(20, 21, 25, .55); }
.plan--featured { border: 1.5px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); background: linear-gradient(var(--card), var(--card)) padding-box; }
.plan--current { outline: 2px dashed rgba(20, 21, 25, .35); outline-offset: 3px; }
.plan__flag { position: absolute; top: -12px; left: 18px; padding: 4px 8px; font-size: 10px; font-weight: 600; color: var(--ink); background: var(--signal); border: 1.5px solid var(--ink); border-radius: 3px; }
.plan__name { font: 850 34px/.95 var(--f-display); text-transform: uppercase; letter-spacing: .005em; }
.plan__blurb { margin-top: 6px; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); min-height: 2.9em; }
.plan__price { display: flex; align-items: baseline; gap: 8px; padding-top: 12px; border-top: 1.5px solid var(--ink); }
.plan__price b { font: 850 52px/1 var(--f-display); letter-spacing: -.01em; }
.plan__price span { font-size: 14px; color: var(--graphite); }
.plan__note { margin-top: -8px; font: 400 11px/1.5 var(--f-mono); font-stretch: 87.5%; color: var(--graphite); }
.plan__note em { white-space: nowrap; font-style: normal; color: var(--ink); background: color-mix(in srgb, var(--signal) 60%, transparent); padding: 0 3px; }
.plan__cta { height: 46px; font-size: 15px; }
.plan__cta.is-current { pointer-events: none; opacity: .6; }
.plan__list { display: grid; gap: 7px; padding-top: 4px; }
.plan__list li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; font-size: 14.5px; line-height: 1.4; color: var(--ink-2); }
.plan__list svg { width: 16px; height: 16px; margin-top: 2px; color: var(--ink); }
.seats { display: flex; align-items: center; gap: 6px; }
.seats .mono { flex: 1; font-size: 10px; color: var(--graphite); }
.seats button { display: grid; place-items: center; width: 32px; height: 32px; font-size: 18px; font-weight: 700; border: 1px solid rgba(20, 21, 25, .25); border-radius: 6px; background: var(--card); }
.seats button:hover { border-color: var(--ink); }
.seats output { min-width: 32px; text-align: center; font: 850 24px/1 var(--f-display); }
.ent { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; margin-top: 18px; padding: 24px 26px; color: var(--on-night); background: var(--night); border-radius: 12px; }
.ent h3 { font: 850 30px/1 var(--f-display); text-transform: uppercase; }
.ent p { margin-top: 6px; color: var(--on-night-2); font-size: 15px; }
.ent .btn--signal { border-color: var(--signal-night); box-shadow: 3px 3px 0 rgba(255, 216, 77, .35); }
.price-foot { margin-top: 16px; font: 400 11px/1.6 var(--f-mono); font-stretch: 87.5%; color: var(--graphite); text-transform: none; }

/* free vs full: the redaction, shown */
.redact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.redact__col { padding: 20px; background: var(--card); border: 1px solid rgba(20, 21, 25, .14); border-radius: 12px; }
.redact__col h3 { display: flex; align-items: center; justify-content: space-between; font: 850 26px/1 var(--f-display); text-transform: uppercase; }
.redact__col h3 small { font: 500 10px/1 var(--f-mono); font-stretch: 87.5%; letter-spacing: .04em; color: var(--graphite); }
.rrow { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--rule-2); }
.rrow:last-child { border-bottom: 0; }
.rrow .pic { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: var(--paper-2); box-shadow: 0 0 0 1px var(--rule); }
.rrow .pic img { width: 100%; height: 100%; object-fit: cover; }
.rrow .pic.is-blur img { filter: blur(6px) grayscale(.6); transform: scale(1.2); }
.rrow b { display: block; font-size: 15px; }
.rrow small { display: block; font: 400 11px/1.4 var(--f-mono); font-stretch: 87.5%; color: var(--graphite); }
.rrow .m { font-weight: 800; font-variant-numeric: tabular-nums; color: #057A55; }
.rrow .hid { letter-spacing: .08em; color: var(--ink-2); }
.redact__col p.note { margin-top: 12px; font-size: 14px; color: var(--ink-2); }

/* one-off searches */
.packs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 760px; }
.pack { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: center; padding: 20px; background: var(--card); border: 1px solid rgba(20, 21, 25, .16); border-radius: 12px; }
.pack h3 { font-size: 18px; }
.pack p { grid-column: 1; font-size: 14px; color: var(--ink-2); }
.pack b { grid-row: 1 / span 2; grid-column: 2; font: 850 40px/1 var(--f-display); }

/* the comparison */
.compare-wrap { overflow-x: auto; }
.compare { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 15px; }
.compare th, .compare td { padding: 12px 14px; text-align: center; border-bottom: 1px solid var(--rule-2); }
.compare thead th { vertical-align: bottom; border-bottom: 1.5px solid var(--ink); }
.compare thead b { display: block; font: 850 24px/1 var(--f-display); text-transform: uppercase; }
.compare thead small { display: block; margin-top: 4px; font: 400 11px/1.3 var(--f-mono); font-stretch: 87.5%; color: var(--graphite); }
.compare tbody th { text-align: left; font-weight: 600; color: var(--ink-2); }
.compare .is-feat { background: color-mix(in srgb, var(--signal) 14%, transparent); }
.compare .yes svg { width: 18px; height: 18px; color: #057A55; margin: 0 auto; }
.compare .no { color: rgba(20, 21, 25, .3); }

/* ways to pay */
.pays { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.pay { padding: 22px; background: var(--card); border: 1px solid rgba(20, 21, 25, .14); border-radius: 12px; }
.pay h3 { display: flex; align-items: center; gap: 10px; font-size: 20px; }
.pay h3 svg { width: 26px; height: 26px; }
.pay p { margin-top: 8px; color: var(--ink-2); font-size: 15.5px; }
.pay ul { display: grid; gap: 4px; margin-top: 10px; font-size: 14.5px; color: var(--ink-2); }
.pay li::before { content: "— "; color: var(--graphite); }

/* ---------------------------------------------------------- account pages */
.auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); min-height: 100vh; }
.auth__main { display: flex; flex-direction: column; padding: 28px clamp(20px, 5vw, 64px) 40px; }
.auth__top { display: flex; align-items: center; justify-content: space-between; }
.auth__top .brand__mark { width: 52px; height: 32px; }
.auth__top .brand__word { font-size: 26px; }
.auth__top p { font-size: 15px; color: var(--ink-2); }
.auth__box { width: min(440px, 100%); margin: auto 0; padding: 48px 0 24px; }
.auth__box h1 { font: 850 clamp(44px, 5vw, 64px)/.9 var(--f-display); text-transform: uppercase; letter-spacing: -.005em; }
.auth__box h1 mark.hl { --hl-y: 70%; --hl-h: 54%; }
.auth__box > p.sub { margin-top: 14px; font-size: 17px; color: var(--ink-2); }
.auth__legal { font-size: 12.5px; color: var(--graphite); }
.auth__legal a { text-decoration: underline; }
.auth__side { position: relative; overflow: hidden; color: var(--on-night); background: var(--night); display: flex; flex-direction: column; justify-content: flex-end; padding: 40px clamp(24px, 4vw, 56px); }
.auth__art { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; }
.auth__art canvas { display: block; width: 100%; height: 100%; }
.auth__side > *:not(.auth__art) { position: relative; }
.auth__side .mono { color: var(--on-night-2); }
.auth__side h2 { margin-top: 10px; font: 850 clamp(34px, 3.4vw, 48px)/.95 var(--f-display); text-transform: uppercase; }
.auth__side ul { display: grid; gap: 8px; margin-top: 18px; font-size: 16px; color: var(--on-night); }
.auth__side li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; }
.auth__side li svg { width: 18px; height: 18px; margin-top: 3px; color: var(--signal-night); }
.auth__plan { display: inline-flex; align-items: baseline; gap: 10px; margin-top: 18px; padding: 10px 14px; border: 1px solid var(--rule-night); border-radius: 8px; background: rgba(255, 255, 255, .04); }
.auth__plan b { font: 850 26px/1 var(--f-display); text-transform: uppercase; color: var(--signal-night); }
.auth__plan span { font-size: 14px; color: var(--on-night-2); }
.form { display: grid; gap: 16px; margin-top: 28px; }
.f { display: grid; gap: 7px; }
.f > span { display: flex; justify-content: space-between; font: 500 10.5px/1.3 var(--f-mono); font-stretch: 87.5%; letter-spacing: .03em; text-transform: uppercase; color: var(--graphite); }
.f > span a { text-transform: none; letter-spacing: 0; font: 600 13px/1.3 var(--f-sans); color: var(--ink); text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 2px; }
.f input { width: 100%; height: 50px; padding: 0 14px; font: 400 17px/1 var(--f-sans); color: var(--ink); background: var(--card); border: 1px solid rgba(20, 21, 25, .25); border-radius: 7px; outline: none; transition: border-color .12s, box-shadow .12s; }
.f input:focus { border-color: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal) 55%, transparent); }
.f.is-bad input { border-color: #9A3412; box-shadow: 0 0 0 4px rgba(154, 52, 18, .12); }
.f small { font-size: 13px; color: var(--graphite); }
.f.is-bad small { color: #9A3412; font-weight: 600; }
.pw { position: relative; }
.pw input { padding-right: 70px; }
.pw button { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); height: 34px; padding: 0 10px; font-size: 13px; font-weight: 700; color: var(--ink-2); border-radius: 5px; }
.pw button:hover { background: var(--paper-2); }
.meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.meter i { height: 4px; border-radius: 2px; background: rgba(20, 21, 25, .12); }
.meter[data-s="1"] i:nth-child(-n+1) { background: #F26B1D; }
.meter[data-s="2"] i:nth-child(-n+2) { background: #E8A400; }
.meter[data-s="3"] i:nth-child(-n+3), .meter[data-s="4"] i { background: #0E9F6E; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--ink-2); cursor: pointer; }
.check input { appearance: none; flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin: 2px 0 0; border: 1.5px solid rgba(20, 21, 25, .5); border-radius: 4px; background: var(--card); cursor: pointer; }
.check input:checked { background: var(--ink); border-color: var(--ink); }
.check input:checked::after { content: ""; width: 9px; height: 4px; margin-top: -2px; border: 2px solid var(--signal); border-top: 0; border-right: 0; transform: rotate(-45deg); }
.form .btn { height: 52px; font-size: 16px; }
.alert { display: flex; gap: 10px; padding: 12px 14px; font-size: 14.5px; line-height: 1.45; border-radius: 8px; color: #7C2D12; background: #FEF1EC; border: 1px solid #F3B9A5; }
.alert--ok { color: #064E3B; background: #EAF4EE; border-color: #A7D3B8; }
.alert--info { color: var(--ink-2); background: var(--paper-2); border-color: var(--rule); }
.alert b { color: inherit; }
.alert button, .alert a { font-weight: 700; text-decoration: underline; color: inherit; }
.alert[hidden] { display: none; }
.code-in { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.code-in input { height: 62px; padding: 0; text-align: center; font: 600 28px/1 var(--f-mono); }
.inbox { display: grid; gap: 14px; margin-top: 28px; padding: 22px; background: var(--card); border: 1px solid rgba(20, 21, 25, .14); border-radius: 12px; }
.inbox__mail { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.inbox__mail svg { width: 28px; height: 28px; flex: none; }
.or { display: flex; align-items: center; gap: 12px; font: 500 10px/1 var(--f-mono); font-stretch: 87.5%; text-transform: uppercase; color: var(--graphite); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.linkish { font-size: 14.5px; font-weight: 600; color: var(--ink-2); text-decoration: underline; text-decoration-color: rgba(20, 21, 25, .3); text-underline-offset: 3px; }
.linkish:hover { color: var(--ink); text-decoration-color: var(--signal); text-decoration-thickness: 3px; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 10px; }

/* ---------------------------------------------------------- checkout */
.co { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 32px; align-items: start; }
.co__card { padding: 24px; background: var(--card); border: 1px solid rgba(20, 21, 25, .16); border-radius: 12px; box-shadow: 0 18px 36px -32px rgba(20, 21, 25, .55); }
.co h2 { font: 850 30px/1 var(--f-display); text-transform: uppercase; }
.co .sh__label { margin-bottom: 14px; }
.summary { display: grid; gap: 0; margin-top: 14px; }
.summary div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule-2); font-size: 15.5px; }
.summary div:last-child { border-bottom: 0; border-top: 1.5px solid var(--ink); font-weight: 700; }
.summary dd { margin: 0; text-align: right; }
.summary dt { color: var(--ink-2); }
.tabs2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.paym { position: relative; display: grid; gap: 4px; padding: 14px 16px; text-align: left; border: 1px solid rgba(20, 21, 25, .2); border-radius: 10px; background: var(--card); cursor: pointer; }
.paym b { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.paym b svg { width: 22px; height: 22px; }
.paym small { font-size: 13px; color: var(--graphite); }
.paym[aria-checked="true"] { border: 1.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.paym.is-off { opacity: .6; }
.paym .soon { position: absolute; top: 10px; right: 10px; font: 600 9.5px/1 var(--f-mono); font-stretch: 87.5%; text-transform: uppercase; padding: 4px 6px; border: 1px dashed var(--graphite); border-radius: 3px; color: var(--graphite); }
.terms2 { display: flex; gap: 6px; margin-top: 14px; }
.terms2 button { flex: 1; height: 40px; font-weight: 700; font-size: 14px; border: 1px solid rgba(20, 21, 25, .2); border-radius: 6px; background: var(--card); }
.terms2 button[aria-pressed="true"] { border-color: var(--ink); background: color-mix(in srgb, var(--signal) 30%, var(--card)); }
.invoice { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; align-items: start; }
.invoice__qr { padding: 10px; background: #fff; border: 1.5px solid var(--ink); border-radius: 8px; }
.invoice__qr svg, .invoice__qr img { display: block; width: 100%; height: auto; }
.invoice dl { display: grid; gap: 12px; margin: 0; }
.invoice dt { font: 500 10px/1.2 var(--f-mono); font-stretch: 87.5%; text-transform: uppercase; color: var(--graphite); }
.invoice dd { margin: 4px 0 0; display: flex; align-items: center; gap: 8px; font: 600 15px/1.4 var(--f-mono); font-stretch: 87.5%; word-break: break-all; }
.invoice dd button { flex: none; height: 28px; padding: 0 8px; font: 700 12px/1 var(--f-sans); border: 1px solid rgba(20, 21, 25, .25); border-radius: 4px; background: var(--card); }
.invoice__status { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 12px 14px; font-size: 15px; background: var(--paper-2); border-radius: 8px; }
.invoice__status .bar { flex: 1; height: 4px; border-radius: 2px; background: rgba(20, 21, 25, .1); overflow: hidden; }
.invoice__status .bar i { display: block; height: 100%; width: var(--w, 100%); background: var(--ink); transition: width 1s linear; }
.done { text-align: center; padding: 30px 10px; }
.done .stamp-big { display: inline-block; padding: 10px 18px; font: 850 40px/1 var(--f-display); text-transform: uppercase; border: 3px solid var(--ink); border-radius: 6px; transform: rotate(-4deg); background: var(--signal); }
.done p { margin-top: 18px; font-size: 17px; color: var(--ink-2); }

/* the homepage's pricing section */
.home-pricing .plans-grid { margin-top: 4px; }
.home-pricing .more { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; margin-top: 22px; font-size: 15px; color: var(--ink-2); }

@media (max-width: 1100px) {
  .plans-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .co { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth__side { display: none; }
  .redact, .pays, .packs { grid-template-columns: minmax(0, 1fr); }
  .ent { grid-template-columns: minmax(0, 1fr); }
  .invoice { grid-template-columns: minmax(0, 1fr); }
  .invoice__qr { max-width: 220px; }
}
@media (max-width: 560px) {
  .plans-grid { grid-template-columns: minmax(0, 1fr); }
  .tabs2 { grid-template-columns: minmax(0, 1fr); }
}