/* mayetech support page.
   Tokens, nav, section heads, hairline panels, the primary button and the bumper
   effects are copied from the mayetech site (Toptinty/mayetech, site/src/site.css and
   pages.css). Brand is BLUE #1873d3. Orange is only the error color, as on the site.
   Dark only, like the site. */

:root{
  --ink:#010101; --surface:#0a0a0b; --surface-2:#131315; --surface-3:#1b1b1f;
  --line:#26262a; --line-soft:#1a1a1e;
  --text:#f2f2f0; --muted:#8a8a90; --faint:#5a5a61;
  --brand:#1873d3; --brand-lo:rgba(24,115,211,.14); --brand-hi:#3d92ea;
  --critical:#ff5c1a; --good:#2fbf6b;
  --ease:cubic-bezier(.215,.62,.34,1);
  --d-xs:.2s; --d-s:.25s; --d-m:.3s; --d-l:.5s;
  --display:'Chakra Petch',system-ui,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono','SF Mono',Consolas,monospace;
  --gut:24px; --pad:clamp(20px,4vw,56px);
  --rev-dur:1;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0;padding-top:64px;background:var(--ink);color:var(--text);font-family:var(--body);
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{margin:0;text-wrap:balance;font-family:var(--display);font-weight:700;letter-spacing:-.02em}
p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.ms{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;line-height:1;
  display:inline-block;white-space:nowrap;font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--pad)}
.mono{font-family:var(--mono)}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--brand);color:#fff;padding:8px 12px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.skip:focus{left:8px}

/* ---- nav ---- */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;
  justify-content:space-between;gap:18px;padding:0 var(--pad);height:64px;
  background:rgba(1,1,1,.72);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-word{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.02em}
.nav-word .a{color:var(--text)}.nav-word .b{color:var(--brand)}
.nav-links{display:flex;gap:4px;align-items:center}
.nav-links a{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);padding:8px 11px;transition:color var(--d-m) var(--ease)}
.nav-links a:hover,.nav-links a.on{color:var(--text)}

/* ---- section head ---- */
.back{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.back:hover{color:var(--text)}
.back .ms{font-size:15px}
.shead{display:flex;align-items:baseline;gap:16px;margin-bottom:12px;flex-wrap:wrap}
.snum{font-family:var(--mono);font-size:12px;color:var(--brand);letter-spacing:.12em}
.stitle{font-size:clamp(34px,6vw,64px);line-height:.98}
.sdesc{color:var(--muted);max-width:56ch;font-size:clamp(15px,1.6vw,17px)}
.sdesc b{color:var(--text);font-weight:600}
.eyebrow{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}

/* ---- page layout: words on the left, the form on the right.
   On a phone the form comes straight after the intro, and the reassurance text after it,
   so nobody scrolls past five rows of small print to give. ---- */
.support{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);
  grid-template-areas:"intro form" "facts form";grid-template-rows:auto 1fr;
  gap:0 clamp(28px,5vw,72px);align-items:start;padding:clamp(34px,6vh,64px) 0 clamp(60px,9vh,110px)}
.intro{grid-area:intro}.facts{grid-area:facts}.form{grid-area:form}
@media(max-width:900px){
  .support{grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "form" "facts";grid-template-rows:none;row-gap:clamp(24px,4vh,40px)}
}

/* ---- facts: spec-plate rhythm (1px gap lines) ---- */
.plate{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(24px,4vh,40px)}
.plate div{background:var(--surface);padding:15px 18px;display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:baseline}
.plate .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.plate .v{font-size:14px;color:var(--text)}
.plate .v a{color:var(--brand);border-bottom:1px solid transparent;transition:border-color var(--d-m) var(--ease)}
.plate .v a:hover{border-color:var(--brand)}
@media(max-width:520px){.plate div{grid-template-columns:1fr;gap:3px}}

/* ---- panels ---- */
.panel{border:1px solid var(--line);background:var(--surface);position:relative}
.panel+.panel{margin-top:var(--gut)}
.panel[hidden]{display:none}
/* Scrolling a panel into view must leave room for the fixed 64px nav, or the panel header
   (and its Change amount button) ends up hidden underneath it. */
#give,#pay{scroll-margin-top:88px}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 18px;
  border-bottom:1px solid var(--line);background:var(--surface-2);min-height:46px}
.tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.tag b{color:var(--text);font-weight:700}
.panel-b{padding:clamp(18px,3vw,28px)}

/* ---- frequency: two-way switch ---- */
.seg{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);margin-bottom:var(--gut)}
.seg button{padding:13px 10px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);background:var(--surface-2);transition:color var(--d-m) var(--ease),background var(--d-m) var(--ease)}
.seg button+button{border-left:1px solid var(--line)}
.seg button:hover{color:var(--text)}
.seg button[aria-pressed="true"]{background:var(--brand-lo);color:var(--text);box-shadow:inset 0 -2px 0 var(--brand)}

/* ---- amounts: four cells sharing hairlines ---- */
.amounts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:420px){.amounts{grid-template-columns:repeat(2,1fr)}}
.amt{background:var(--surface);padding:18px 8px 14px;display:flex;flex-direction:column;align-items:center;gap:4px;
  transition:background var(--d-m) var(--ease)}
.amt:hover{background:var(--surface-2)}
.amt .n{font-family:var(--display);font-weight:700;font-size:clamp(22px,3.4vw,28px);letter-spacing:-.02em;line-height:1}
.amt .n .ms{font-size:26px}
.amt .u{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.amt[aria-pressed="true"]{background:var(--brand-lo);box-shadow:inset 0 0 0 2px var(--brand)}
.amt[aria-pressed="true"] .u{color:var(--text)}

/* ---- note ---- */
.note{margin-top:var(--gut)}
.note label{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);margin-bottom:8px}
.note label .opt{letter-spacing:.08em}
.field.area{display:block}
.field textarea{display:block;width:100%;min-height:84px;resize:vertical;background:none;border:0;outline:0;
  padding:12px 14px;font:inherit;font-size:14px;line-height:1.5;color:var(--text)}
.field textarea::placeholder{color:var(--faint)}
.note-foot{display:flex;justify-content:space-between;gap:14px;margin-top:8px;font-size:12px;color:var(--muted)}
.note-foot .count{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--faint);white-space:nowrap}

/* ---- custom amount ---- */
.custom{margin-top:var(--gut)}
.custom[hidden]{display:none}
.custom label{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);margin-bottom:8px}
.field{display:flex;align-items:stretch;border:1px solid var(--line);background:var(--surface-2);
  transition:border-color var(--d-m) var(--ease)}
.field:focus-within{border-color:var(--brand)}
.field .cur{display:flex;align-items:center;padding:0 14px;font-family:var(--display);font-size:20px;color:var(--muted);
  border-right:1px solid var(--line)}
.field input{flex:1;min-width:0;background:none;border:0;outline:0;padding:13px 14px;font-family:var(--display);
  font-size:20px;font-weight:600;letter-spacing:-.01em}
.field input::placeholder{color:var(--faint)}

.hint{margin-top:16px;font-size:13px;color:var(--muted)}
.err{margin-top:12px;font-size:13px;color:var(--critical);display:flex;gap:8px;align-items:flex-start}
.err[hidden]{display:none}
.err .ms{font-size:17px;flex:none}
.notice{margin-top:16px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--muted);
  border-left:2px solid var(--line);padding-left:12px}
.notice[hidden]{display:none}

/* ---- buttons (the site's own .btn-p / .btn-s and its two bumper effects) ---- */
.btn-p,.btn-s{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 20px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--brand);
  transition:background var(--d-m) var(--ease),color var(--d-m) var(--ease),opacity var(--d-m) var(--ease)}
.btn-p{background:var(--brand);color:#fff}
.btn-p:hover{background:var(--brand-hi);border-color:var(--brand-hi)}
.btn-s{border-color:var(--line);color:var(--muted)}
.btn-s:hover{color:var(--text);border-color:var(--faint)}
.btn-p[disabled]{opacity:.45;cursor:not-allowed}
.btn-p[disabled]:hover{background:var(--brand);border-color:var(--brand)}
.btn-p .ms{font-size:17px}
.go{width:100%;margin-top:var(--gut)}
.bump-corner{position:relative}
.bump-corner::before,.bump-corner::after{content:'';position:absolute;width:9px;height:9px;
  border:1px solid currentColor;opacity:.85;transition:all var(--d-m) var(--ease)}
.bump-corner::before{top:-4px;left:-4px;border-right:0;border-bottom:0}
.bump-corner::after{bottom:-4px;right:-4px;border-left:0;border-top:0}
.bump-corner:hover::before{top:-7px;left:-7px;width:13px;height:13px}
.bump-corner:hover::after{bottom:-7px;right:-7px;width:13px;height:13px}
.bump-fill{position:relative;overflow:hidden;z-index:0}
.bump-fill::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--brand-hi);
  transform:translateY(101%);transition:transform var(--d-m) var(--ease)}
.bump-fill:hover::before{transform:none}
.bump-fill[disabled]::before{display:none}

/* ---- embedded checkout container ---- */
#checkout{min-height:320px;padding:16px}
/* Stripe needs this element completely empty to mount, so the loading line is drawn by CSS
   and vanishes on its own as soon as Stripe inserts the form. */
#checkout:empty::before{content:'Loading secure checkout';display:block;font-family:var(--mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--faint);padding:30px 18px}

/* ---- thanks / terms pages ---- */
.article{max-width:720px;padding:clamp(34px,6vh,64px) 0 clamp(60px,9vh,110px)}
.article h2{font-size:20px;margin:34px 0 8px}
.article p,.article li{color:var(--muted);margin:0 0 12px}
.article p b,.article li b{color:var(--text);font-weight:600}
.article ul{padding-left:20px;margin:0 0 12px}
.article a:not(.back):not(.btn-p):not(.btn-s){color:var(--brand);border-bottom:1px solid transparent;transition:border-color var(--d-m) var(--ease)}
.article a:not(.back):not(.btn-p):not(.btn-s):hover{border-color:var(--brand)}
.status{border:1px solid var(--line);background:var(--surface);padding:clamp(22px,4vw,36px);margin:22px 0}
.status .ms{font-size:30px;color:var(--brand)}
.status.bad .ms{color:var(--critical)}
.status h2{margin:12px 0 8px;font-size:clamp(24px,3.4vw,34px)}
.status .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}

/* ---- footer ---- */
.foot{display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;align-items:center;
  border-top:1px solid var(--line);padding:22px 0 40px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.foot a:hover{color:var(--text)}
.foot nav{display:flex;gap:18px}

/* ---- scroll reveal, as on the site: a restrained rise ---- */
.rv{opacity:0;transform:translateY(18px);
  transition:opacity calc(var(--d-l)*var(--rev-dur)) var(--ease),transform calc(var(--d-l)*var(--rev-dur)) var(--ease)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
.no-js .rv{opacity:1;transform:none}