/* Athena Bitcoin Partnership Form
   Every rule is scoped to .ath-pt so nothing here can reach the rest of the
   page, and nothing on the page reaches in. */

.ath-pt,.ath-pt *,.ath-pt *::before,.ath-pt *::after{box-sizing:border-box}

/* Breakdance lays a section out as a flex column that does not stretch its
   children, so the block is told to fill the section it sits in. */
.bde-code-block:has(> .ath-pt){width:100%;align-self:stretch}

.ath-pt{
  --f-ink:#0B0B0C; --f-gold:#FFC04A; --f-body:#3A3A42; --f-muted:#6C6C75;
  --f-line:#DAD8D0; --f-shade:#F7F7F5; --f-err:#B3261E;
  display:block;width:100%;background:#FFFFFF;
  font-family:Poppins,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--f-ink);
}
.ath-pt .f-in{max-width:1000px;margin:0 auto;padding:34px 40px 90px}

/* Folded away until one of the boxes above asks for it. Kept out of the
   layout entirely rather than hidden, so it takes up no room and nothing
   inside it can be tabbed to by accident. */
.ath-pt.is-closed{display:none}

/* Landing on the form used to put its top underneath the site's fixed header,
   so the heading and the first fields were off screen. Every route into this
   form lands here: the six boxes above call scrollIntoView on it, and the
   plugin itself redirects to #partnership-form after a send. All of them
   respect this margin.

   The header is not one height. It is 182px at the top of a page and 135px
   once it has shrunk, and it moves again any time the navigation is edited,
   so it is measured in partnership.js and written to --ap2-hdr. The numbers
   here are only the fallback for JavaScript being off, and they deliberately
   use the taller reading at each width: landing a little low is a great deal
   better than landing underneath the header and seeing nothing.

   --ap2-lead is a leftover safety net. The form's heading used to be a separate
   Breakdance section sitting directly above the form, so landing the form
   neatly below the header buried its own heading behind it. partnership.js
   measured that section and added its height here to leave room for it.

   As of 1.0.3 the heading is drawn by the form itself, .f-head below, so on
   the Partnership page there is no such section any more and this reads 0.
   The measuring stays because it costs nothing and still does the right thing
   if a page puts a bare heading above the form on its own. */
:root{--ap2-hdr:182px}
@media (max-width:1199px){ :root{--ap2-hdr:212px} }
@media (max-width:1023px){ :root{--ap2-hdr:226px} }
@media (max-width:767px){ :root{--ap2-hdr:262px} }
.ath-pt{scroll-margin-top:calc(var(--ap2-hdr) + var(--ap2-lead, 0px) + 24px)}

/* --------------------------------------------------------------- HEADING */
/* Was a Breakdance section above the form. It is part of the form now so that
   it folds away with it, and these numbers are the ones that section computed
   to, read off the live page before it was moved: Poppins 700 at 43px over
   1.209, and Roboto 400 at 18px over 1.279, both centred.

   The 43px is wrapped in a clamp because the Breakdance section had its own
   responsive sizes and a flat 43px would have been too big on a phone. It
   still resolves to exactly 43px at the desktop width, so nothing moves. */
.ath-pt .f-head{margin:0 0 42px;text-align:center}
.ath-pt .f-head-t{
  font-family:Poppins,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:clamp(28px,3.4vw,43px);font-weight:700;line-height:1.209;
  color:#000000;margin:0;text-wrap:balance;
}
.ath-pt .f-head-p{
  font-family:Roboto,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:18px;font-weight:400;line-height:1.279;color:#080808;
  /* 68ch is 688px at this size. The default line measures 619px, so it sits on
     one line the way it did as a Breakdance section, and a longer edit wraps
     before the line gets uncomfortable to read. balance splits a wrapped line
     evenly rather than leaving two words stranded underneath. */
  margin:14px auto 0;max-width:68ch;text-wrap:balance;
}

/* ------------------------------------------------------------- LAYOUT */
/* minmax(0,1fr) rather than 1fr. A plain 1fr track refuses to shrink below
   its content's min-content width, and a dropdown's min-content is as wide
   as its longest option, which pushes the page sideways on a small phone. */
.ath-pt .f-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 44px}
.ath-pt .f-full{grid-column:1 / -1}
.ath-pt .f-row{margin:0 0 24px;min-width:0}

.ath-pt .f-lab{display:block;font-size:15px;font-weight:600;letter-spacing:-.005em;
  line-height:1.4;margin:0 0 8px;color:var(--f-ink)}
.ath-pt .f-req{color:var(--f-gold);margin-left:3px}
/* the old form hid the label on some fields and leaned on the note below.
   It is still here for anyone using a screen reader. */
.ath-pt .f-lab--hide{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ath-pt .f-help{font-family:Roboto,system-ui,sans-serif;font-size:13px;font-weight:400;
  line-height:1.6;color:var(--f-muted);margin:7px 0 0;padding:0}

.ath-pt input[type=text],.ath-pt input[type=email],.ath-pt input[type=tel],
.ath-pt input[type=date],.ath-pt select,.ath-pt textarea{
  width:100%;display:block;background:#FFFFFF;color:var(--f-ink);
  font-family:Roboto,system-ui,sans-serif;font-size:16px;font-weight:400;line-height:1.5;
  border:1px solid var(--f-line);border-radius:2px;padding:13px 14px;margin:0;
  min-width:0;max-width:100%;
  transition:border-color .15s ease,box-shadow .15s ease;-webkit-appearance:none;appearance:none;
}
.ath-pt textarea{min-height:150px;resize:vertical}
.ath-pt textarea.f-sm{min-height:110px}
.ath-pt select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B0C' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:18px;padding-right:42px;
}
.ath-pt input:focus,.ath-pt select:focus,.ath-pt textarea:focus{
  outline:none;border-color:var(--f-ink);box-shadow:0 0 0 3px rgba(255,192,74,.35);
}
.ath-pt input::placeholder,.ath-pt textarea::placeholder{color:#A9A9B2;opacity:1}
/* Safari draws a date field as shrink to fit unless it is told otherwise,
   and iOS gives it its own inner padding. Both are levelled here so the
   picker sits in a box the same size as every other field. */
.ath-pt input[type=date]{min-height:51px;-webkit-appearance:none;appearance:none}
.ath-pt input[type=date]::-webkit-date-and-time-value{text-align:left;margin:0}
.ath-pt input[type=date]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.55}
.ath-pt input[type=date]::-webkit-calendar-picker-indicator:hover{opacity:1}
.ath-pt .f-stack > * + *{margin-top:10px}
.ath-pt .f-sub{font-family:Roboto,system-ui,sans-serif;font-size:13px;color:var(--f-muted);
  margin:6px 0 14px;display:block}
.ath-pt .f-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 20px}
.ath-pt .f-two-item{min-width:0}

/* -------------------------------------------------------- YES NO PAIR */
.ath-pt .f-yn{display:flex;gap:10px;flex-wrap:wrap}
.ath-pt .f-yn label{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;margin:0;
  border:1px solid var(--f-line);border-radius:2px;padding:11px 18px;
  font-family:Roboto,system-ui,sans-serif;font-size:15px;color:var(--f-body);
  transition:border-color .15s ease,background-color .15s ease,color .15s ease;
}
.ath-pt .f-yn input{accent-color:#0B0B0C;width:16px;height:16px;margin:0}
.ath-pt .f-yn label:has(input:checked){border-color:var(--f-ink);background:var(--f-shade);color:var(--f-ink)}
.ath-pt .f-yn label:has(input:focus-visible){box-shadow:0 0 0 3px rgba(255,192,74,.35)}

/* ----------------------------------------------------------- DROP ZONE */
.ath-pt .f-drop{
  position:relative;overflow:hidden;display:block;margin:0;
  border:1px dashed var(--f-line);border-radius:3px;background:var(--f-shade);
  padding:26px 22px;text-align:center;cursor:pointer;
  transition:border-color .15s ease,background-color .15s ease;
}
.ath-pt .f-drop:hover,.ath-pt .f-drop.is-over{border-color:var(--f-gold);background:#FFFDF6}
.ath-pt .f-drop:focus-within{border-color:var(--f-ink);box-shadow:0 0 0 3px rgba(255,192,74,.35)}
.ath-pt .f-drop svg{width:24px;height:24px;color:var(--f-muted);display:block;margin:0 auto}
.ath-pt .f-drop-t{display:block;font-size:15px;font-weight:600;margin-top:9px}
.ath-pt .f-drop-p{display:block;font-family:Roboto,system-ui,sans-serif;font-size:13px;color:var(--f-muted);margin:5px 0 0}
.ath-pt .f-drop-list{display:block;font-family:Roboto,system-ui,sans-serif;font-size:14px;color:var(--f-ink);margin:12px 0 0}
.ath-pt .f-drop-list:empty{display:none}
.ath-pt .f-drop-list span{display:inline-block;background:#FFF;border:1px solid var(--f-line);
  border-radius:2px;padding:7px 12px;margin:0 6px 6px 0}
.ath-pt .f-drop input{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none;clip-path:inset(50%)}

/* --------------------------------------------------------------- NOTE
   A panel of copy rather than a field. Used to send a complaint to the
   right form, and to point applicants at the Careers page. */
.ath-pt .f-note{
  border:1px solid var(--f-line);border-left:3px solid var(--f-ink);border-radius:3px;
  background:#FFFFFF;padding:22px 24px;margin:0 0 24px;
}
.ath-pt .f-note-t{font-size:16px;font-weight:600;line-height:1.4;margin:0;color:var(--f-ink)}
.ath-pt .f-note-p{
  font-family:Roboto,system-ui,sans-serif;font-size:15px;line-height:1.7;
  color:var(--f-body);margin:8px 0 0;max-width:70ch;
}
.ath-pt .f-note-a{
  display:inline-block;margin-top:14px;
  font-family:Roboto,system-ui,sans-serif;font-size:13px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  transition:text-decoration-color .2s ease;
}
.ath-pt a.f-note-a,.ath-pt a.f-note-a:link,.ath-pt a.f-note-a:visited{color:var(--f-ink)}
.ath-pt a.f-note-a:hover,.ath-pt a.f-note-a:focus-visible{
  color:var(--f-ink);text-decoration-color:var(--f-gold);text-decoration-thickness:2px;
}
.ath-pt a.f-note-a:focus-visible{outline:2px solid var(--f-gold);outline-offset:3px}

/* ------------------------------------------------------------- ERRORS */
.ath-pt .f-errors{border:1px solid var(--f-err);border-left-width:3px;border-radius:3px;
  background:#FDF4F3;padding:20px 24px;margin:0 0 30px}
.ath-pt .f-errors-t{font-size:15px;font-weight:600;margin:0;color:var(--f-err)}
.ath-pt .f-errors ul{font-family:Roboto,system-ui,sans-serif;font-size:15px;line-height:1.7;
  color:var(--f-body);margin:8px 0 0;padding-left:20px}
.ath-pt .f-bad input,.ath-pt .f-bad textarea,.ath-pt .f-bad select{border-color:var(--f-err)}
.ath-pt .f-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ------------------------------------------------------------ ACTIONS */
.ath-pt .f-act{margin-top:6px}
.ath-pt .f-btn{
  display:inline-block;padding:16px 38px;border-radius:2px;cursor:pointer;
  background:var(--f-gold);border:1px solid var(--f-gold);color:var(--f-ink);
  font-family:Poppins,system-ui,sans-serif;font-size:15px;font-weight:600;line-height:1;
  transition:background-color .2s ease,border-color .2s ease;
}
.ath-pt .f-btn:hover,.ath-pt .f-btn:focus-visible{background:#FFD07A;border-color:#FFD07A;color:var(--f-ink)}
.ath-pt .f-btn:focus-visible{outline:2px solid var(--f-gold);outline-offset:3px}
.ath-pt .f-btn[disabled]{opacity:.6;cursor:default}

/* ------------------------------------------------------------- THANKS */
.ath-pt .f-thanks{display:none;border:1px solid var(--f-line);border-top:3px solid var(--f-gold);
  border-radius:3px;background:var(--f-shade);padding:44px}
.ath-pt .f-thanks.is-shown{display:block}
.ath-pt .f-thanks:focus{outline:none}
.ath-pt .f-tick{width:44px;height:44px;border-radius:50%;background:var(--f-gold);display:grid;place-items:center}
.ath-pt .f-tick svg{width:22px;height:22px;color:var(--f-ink)}
.ath-pt .f-thanks h3{font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1.2;margin:20px 0 0;color:var(--f-ink)}
.ath-pt .f-thanks p{font-family:Roboto,system-ui,sans-serif;font-size:16px;line-height:1.7;
  color:var(--f-body);margin:12px 0 0;max-width:62ch}
.ath-pt .f-thanks a{color:var(--f-ink);font-weight:500;text-decoration:underline;text-underline-offset:2px}
.ath-pt .f-thanks a:hover,.ath-pt .f-thanks a:focus-visible{color:var(--f-ink);text-decoration-color:var(--f-gold)}
.ath-pt .f-ref{display:inline-block;margin-top:20px;background:#FFFFFF;border:1px solid var(--f-line);
  border-radius:2px;padding:12px 18px;font-family:Roboto,system-ui,sans-serif;font-size:15px;color:var(--f-body)}
.ath-pt .f-ref b{font-family:Poppins,sans-serif;font-weight:600;color:var(--f-ink);letter-spacing:.02em}

/* --------------------------------------------------------- CONDITIONAL */
.ath-pt [data-when]{display:none}
.ath-pt [data-when].is-shown{display:block}
/* Before the script runs, show nothing conditional rather than everything. */
.ath-pt .f-form:not(.is-ready) [data-when]{display:none}

/* ---------------------------------------------------------- RESPONSIVE */
@media (max-width:1023px){
  .ath-pt .f-in{padding:30px 32px 76px}
  .ath-pt .f-head{margin-bottom:34px}
}
@media (max-width:767px){
  .ath-pt .f-in{padding:26px 24px 60px}
  .ath-pt .f-grid,.ath-pt .f-two{grid-template-columns:minmax(0,1fr);gap:0}
  .ath-pt .f-btn{width:100%;text-align:center}
  /* 16px keeps iOS from zooming the page when a field is focused */
  .ath-pt input,.ath-pt select,.ath-pt textarea{font-size:16px}
  /* a date field is easy to fat finger, so it gets the full width on a phone */
  .ath-pt input[type=date]{width:100%}
  .ath-pt .f-note{padding:18px 20px}
  .ath-pt .f-thanks{padding:30px 24px}
  .ath-pt .f-thanks h3{font-size:22px}
  .ath-pt .f-head{margin-bottom:28px}
  .ath-pt .f-head-p{font-size:17px}
}
@media (prefers-reduced-motion:no-preference){
  .ath-pt [data-when].is-shown{animation:ccf-in .22s ease}
  @keyframes ccf-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
}