/* access: login.html and signup.html. THE OWNER KEY.
   Real tills have a mode key. Ours has two positions, SALE and OWNER, and the owner dashboard really is owner.cryptap.xyz.
   One key switch (js/p-access.js builds it into .acc-lock) serves both pages: on login you turn it, on signup it is issued.
   Owned by the access page. Scoped under .acc-* (the shared lock), .lg-* and #lg (login), .sg-* and #sg* (signup).
   Region colours are keyed on the lock's own mode or on the region ids, never on a bare [data-tone] ancestor. */

/* ================================================================ the key switch (shared)
   The drawing is one 400x400 SVG with 1px non-scaling strokes in currentColor. --acc-a turns the plug (keyway and key plate)
   and the key button with it; --acc-k (= 400 / rendered width, written by JS) keeps the labels and LEDs at screen size. */
.acc-fig{--acc-w:400px;display:flex;flex-direction:column;align-items:center;margin:0;min-width:0}
.acc-lock{--acc-a:-40deg;--acc-k:1;position:relative;width:min(var(--acc-w),100%);aspect-ratio:1/1;flex:none}
.acc-lock[data-mode=login]{color:#f2f2f2;--acc-bg:#0b1220}
.acc-lock[data-mode=signup]{color:var(--ink);--acc-bg:var(--paper)}
.acc-svg{position:absolute;inset:0;width:100%;height:100%;max-width:none;overflow:visible;pointer-events:none}
.acc-ln{fill:none;stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke}
.acc-dim{opacity:.35}
.acc-bow{fill:var(--acc-bg)}
/* the plug turns about the lock's centre: keyway, plate and the button over the plate share one angle */
.acc-plug,.acc-plate{transform-box:view-box;transform-origin:200px 200px}
.acc-plug{transform:rotate(var(--acc-a))}
.acc-mark path{fill:none;stroke:currentColor;stroke-linecap:round}
.acc-mark .acc-nfc{stroke:#d9ad12}
/* the rim lights gold from the SALE stop to wherever the plug points */
.acc-arc{fill:none;stroke:#d9ad12;stroke-width:1.5;stroke-linecap:butt;vector-effect:non-scaling-stroke}
/* detent labels and their LEDs: unlit at 25%, SALE lit in the drawing's colour, OWNER lit gold */
.acc-lab{font-family:var(--cond);font-weight:600;font-size:calc(12px * var(--acc-k));letter-spacing:.14em;fill:currentColor;
  dominant-baseline:central;opacity:.62;transition:opacity .24s linear}
.acc-led{fill:currentColor;opacity:.25;transition:opacity .12s linear}
.acc-stop.acc-lit .acc-led{opacity:1}
.acc-stop.acc-lit .acc-lab{opacity:1}
.acc-owner.acc-lit .acc-led{fill:#d9ad12}
/* the drawing ends at the rim, 50 units above the box's foot: the caption sits 18px under the rim */
.acc-cap{margin-top:calc(var(--acc-w) * -.125 + 18px);font-family:var(--mono);font-size:11px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;
  white-space:nowrap;text-align:center;color:var(--pg-dim,var(--ink-2))}
.acc-cap-t{display:inline-block;max-width:100%}

/* the key itself: a button laid over the plate, turned with it. Only the plate takes the drag. On a touch screen an up or
   down swipe over it still scrolls the page (pan-y): js/p-access.js only turns the key for a stroke across and around it. */
.acc-key{position:absolute;left:50%;top:50%;width:24%;height:44%;border-radius:31.25%/17.05%;
  transform:translate(-50%,-50%) rotate(var(--acc-a));touch-action:pan-y;cursor:grab;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.acc-key:focus-visible{outline:2px solid #d9ad12;outline-offset:4px}
html.acc-drag,html.acc-drag *{cursor:grabbing!important}
.acc-lock.acc-on .acc-key{cursor:default}
/* without script there is no drawing and no key: the plain link is the way in */
html:not(.js) .acc-fig{display:none}

/* the reply line under a page's actions (both pages): a sentence and its link */
.acc-alt{font-family:var(--sans);font-size:16px;line-height:1.5;color:var(--pg-ink2,var(--ink-2))}
.acc-alt-a{color:var(--pg-ink,var(--ink));text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;
  text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);transition:color .24s linear,text-decoration-color .24s linear;
  -webkit-tap-highlight-color:transparent}
@media (hover:hover){ .acc-alt-a:hover{color:var(--pg-hover,var(--blue));text-decoration-color:currentColor} }

/* ================================================================ login: the back office after close */
#lg{display:flex;flex-direction:column;justify-content:center;min-height:100vh;min-height:100svh}
.lg-copy .pg-kick{display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px 12px}
.lg-copy .pg-h1{margin-top:clamp(20px,2.4vw,32px)}
.lg-copy .pg-lead{margin-top:clamp(24px,2.6vw,36px)}
.lg-act{margin-top:clamp(32px,3.2vw,44px)}
.lg-fine{margin-top:16px;font-family:var(--mono);font-size:11.5px;line-height:1.6;letter-spacing:.02em;color:var(--pg-dim)}
.lg-fine a{color:var(--pg-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);transition:color .24s linear,text-decoration-color .24s linear}
@media (hover:hover){ .lg-fine a:hover{color:var(--pg-hover);text-decoration-color:currentColor} }
#lg .acc-alt{margin-top:clamp(32px,3.6vw,52px);padding-top:18px;max-width:46ch;box-shadow:inset 0 1px 0 rgba(242,242,242,.16)}
@media (min-width:980px){
  #lg{padding-top:calc(var(--bar-h) + var(--nav-h) + 32px);padding-bottom:40px}
  /* the copy sits on the lock's centre line: the two flexible rows share whatever the lock is taller by */
  .lg-grid{grid-template-rows:minmax(0,1fr) auto auto minmax(0,1fr)}
  .lg-copy{grid-column:1/7;grid-row:2}
  .lg-act{grid-column:1/7;grid-row:3}
  .lg-fig{grid-column:7/13;grid-row:1/5;align-self:center}
}

/* ================================================================ signup: the terminal leads, CrypTap Go is the way to start small
   The terminal card is the wide, lit one (render, price, the full benefit list, the primary button). The comparison sits between
   the two, and CrypTap Go follows: narrower, quieter, an outline button. */
#sgTop{padding-bottom:0}
.sg-pick{padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(72px,8vw,112px)}
.sg-cards{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(16px,2vw,32px);align-items:start}
.sg-card{display:flex;flex-direction:column;min-width:0;padding:clamp(24px,2.6vw,40px);box-shadow:inset 0 0 0 1px var(--line-strong);
  background:var(--paper);scroll-margin-top:calc(var(--bar-h,0px) + var(--nav-h,76px) + 24px);transition:box-shadow .3s linear}
.sg-card.sg-pin{box-shadow:inset 0 0 0 2px var(--blue),0 0 0 4px color-mix(in srgb,var(--blue) 14%,transparent)}
.sg-tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0}
.sg-tag{margin:0}
.sg-rec{display:inline-block;padding:4px 7px 3px;background:var(--blue);color:#fff;font-family:var(--cond);font-weight:600;font-size:11px;
  line-height:14px;letter-spacing:.12em;text-transform:uppercase}
.sg-tag-q{font-family:var(--cond);font-weight:600;font-size:11px;line-height:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.sg-h{margin-top:18px;font-family:var(--sans);font-weight:400;font-size:clamp(28px,2.8vw,40px);line-height:1.06;letter-spacing:-.028em;text-wrap:balance}
.sg-h-big{font-size:clamp(34px,4vw,56px);line-height:1.02;letter-spacing:-.034em}
.sg-h-sm{font-size:clamp(22px,1.9vw,28px);line-height:1.15;letter-spacing:-.02em}
.sg-p{margin-top:14px;font-family:var(--sans);font-size:18px;line-height:1.5;color:var(--ink-2);max-width:46ch;text-wrap:pretty}

/* the terminal: white card, blue edge, the render beside the copy */
.sg-term{grid-column:1/-1;background:var(--white);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--blue) 55%,transparent),0 24px 60px -32px rgba(14,23,38,.28)}
.sg-term.sg-pin{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--blue) 55%,transparent),0 24px 60px -32px rgba(14,23,38,.28)}
.sg-term-top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,3vw,48px);align-items:center}
.sg-term-copy{min-width:0}
.sg-term .sg-p{font-size:19px;color:var(--ink);max-width:44ch}
.sg-ben{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;
  font-family:var(--sans);font-size:16.5px;line-height:1.4}
.sg-ben li{display:flex;gap:10px;align-items:flex-start;padding:11px 0;box-shadow:inset 0 1px 0 var(--line)}
.sg-ck{flex:none;width:14px;height:14px;margin-top:.2em;fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sg-term-art{display:flex;flex-direction:column;align-items:center;margin:0;padding:clamp(20px,2.4vw,36px) 16px;
  background:radial-gradient(60% 55% at 50% 42%,color-mix(in srgb,var(--blue-soft) 26%,transparent),transparent 72%),var(--paper-2)}
.sg-term-img{display:block;width:min(300px,100%);max-width:863px;height:auto}
.sg-price{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:18px;text-align:center}
.sg-price-n{font-family:var(--sans);font-size:clamp(32px,3vw,44px);line-height:1;letter-spacing:-.03em;color:var(--ink)}
.sg-price-t{font-family:var(--mono);font-size:11.5px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.sg-term-cta{margin-top:28px;padding-top:0}
.sg-buy.btn{height:56px;padding:0 32px;font-size:15px}
.sg-how{margin-top:clamp(28px,3vw,40px)}
.sg-how-k{font-family:var(--mono);font-size:11.5px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.sg-term .sg-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:28px;margin-top:10px}

.sg-list{list-style:none;margin:20px 0 0;padding:0}
.sg-step{display:flex;gap:16px;padding:12px 0;box-shadow:inset 0 1px 0 var(--line)}
.sg-i{flex:none;padding-top:4px;font-family:var(--mono);font-size:11.5px;line-height:16px;letter-spacing:.06em;color:var(--ink-2)}
.sg-t{font-family:var(--sans);font-weight:400;font-size:18px;line-height:1.35;letter-spacing:-.01em}
.sg-b{margin-top:4px;font-family:var(--sans);font-size:16px;line-height:1.5;color:var(--ink-2)}

/* terminal or Go: three rows, the terminal column lit */
.sg-cmp{grid-column:7/13;grid-row:2;min-width:0;padding:clamp(24px,2.6vw,40px) 0 0 clamp(0px,2vw,24px)}
.sg-cmp-h{font-family:var(--mono);font-weight:400;font-size:11.5px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.sg-tbl{width:100%;margin-top:10px;border-collapse:collapse;font-family:var(--sans);font-size:16px;line-height:1.35}
.sg-tbl th,.sg-tbl td{padding:12px 10px 12px 0;text-align:left;vertical-align:top;font-weight:400;box-shadow:inset 0 1px 0 var(--line)}
.sg-tbl thead th{padding-top:0;font-family:var(--cond);font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);box-shadow:none}
.sg-tbl tbody th{color:var(--ink-2)}
.sg-tbl td{color:var(--ink-2)}
.sg-tbl .sg-col-t{color:var(--ink);font-weight:500}
.sg-tbl thead .sg-col-t{color:var(--blue)}

/* CrypTap Go: the quieter card */
.sg-go{grid-column:1/7;grid-row:2;background:transparent}
.sg-go .sg-h{margin-top:12px}
.sg-go .sg-p{font-size:16.5px}
.sg-pts{list-style:none;margin:18px 0 0;padding:0;font-family:var(--sans);font-size:16px;line-height:1.5;color:var(--ink-2)}
.sg-pts li{position:relative;padding:8px 0 8px 22px;box-shadow:inset 0 1px 0 var(--line)}
.sg-pts li::before{content:"";position:absolute;left:0;top:calc(8px + .75em);width:10px;height:1px;background:currentColor;opacity:.55}
.sg-cta{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:auto;padding-top:24px}
.sg-note{font-family:var(--sans);font-size:15px;line-height:1.4;color:var(--ink-2)}
.sg-cta .pg-link{margin-top:-4px}
.sg-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px 40px;margin-top:32px}

/* ================================================================ phones and small tablets */
@media (max-width:979.98px){
  #lg{justify-content:flex-start}
  .lg-fig{margin-top:44px}
  .lg-fig{--acc-w:260px}
  .lg-act{margin-top:40px}
  .lg-act .btn{display:flex;width:100%;height:52px}
  .sg-cards{grid-template-columns:minmax(0,1fr)}
  .sg-term,.sg-cmp,.sg-go{grid-column:1/-1;grid-row:auto}
  .sg-cmp{padding:8px 0 0}
  .sg-term-top{grid-template-columns:minmax(0,1fr)}
  .sg-term-art{order:-1;padding:18px 16px 20px}
  .sg-term-img{width:min(220px,100%)}
  .sg-price{margin-top:12px}
  .sg-ben{grid-template-columns:minmax(0,1fr)}
  .sg-term .sg-list{grid-template-columns:minmax(0,1fr)}
  .sg-p,.sg-term .sg-p{font-size:17px}
  /* a reply link moves to the next line whole rather than splitting ("Create an / account" on a 320px screen) */
  .acc-alt-a{white-space:nowrap}
  .sg-cta{align-items:stretch}
  .sg-cta .btn{display:flex;width:100%;height:52px}
  .sg-cta .sg-buy.btn{height:56px}
  .sg-cta .pg-link{align-self:flex-start}
  .sg-foot{flex-direction:column}
}

/* phones: the login headline is set at 40px; tablets keep the fluid size and a button of reading width */
@media (max-width:599.98px){ #lg .pg-h1{font-size:40px} .sg-card{padding:24px 18px} }
/* the narrowest phones: the terminal button's label keeps its price on one line */
@media (max-width:359.98px){ .sg-cta .btn{padding:0 12px;gap:8px;letter-spacing:.05em} }
@media (min-width:600px) and (max-width:979.98px){
  .lg-act .btn{max-width:440px}
  /* the lock stands over the button it turns for, in the same 440px column, not adrift in the middle of the page */
  .lg-fig{--acc-w:340px;max-width:440px}
}

/* ================================================================ forced colours: the drawing keeps its lines and lit LEDs */
@media (forced-colors:active){
  .acc-lock{forced-color-adjust:none;color:CanvasText;--acc-bg:Canvas}
  .acc-arc,.acc-owner.acc-lit .acc-led,.acc-mark .acc-nfc{stroke:Highlight;fill:Highlight}
  .acc-arc,.acc-mark .acc-nfc{fill:none}
  .sg-card.sg-pin{outline:2px solid Highlight}
}

/* ================================================================ reduced motion: every state is drawn at once */
html.reduce .acc-lab,html.reduce .acc-led,html.reduce .sg-card,html.reduce .acc-alt-a,html.reduce .lg-fine a{transition:none}

/* Go does not use tap-to-pay: no NFC glyph on its button */
.btn-go .btn-nfc{display:none}

/* ================================================================ signup: the real CrypTap app's welcome screen, small, under Terminal or Go */
.sg-shot{margin:28px 0 0;display:flex;flex-direction:column;align-items:center;width:220px}
.sg-shot-f{width:100%;padding:6px;background:var(--white);border:1px solid var(--line-strong);border-radius:28px;
  box-shadow:0 1px 2px rgba(14,23,38,.05),0 24px 48px -26px rgba(14,23,38,.34)}
.sg-shot img{width:100%;height:auto;border-radius:22px;background:var(--white)}
.sg-shot figcaption{margin-top:12px;font-family:var(--cond);font-weight:600;font-size:10.5px;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
@media (max-width:979.98px){ .sg-shot{width:200px;margin:24px auto 4px} .sg-shot-f{border-radius:26px;padding:5px} .sg-shot img{border-radius:21px} }