:root { --copper:#C46A2B; --navy:#1F3A5F; --sky:#6EC1E4; --cream:#FFF6E9; --green:#2E9E5B; --text:#1a1a1a; }
* { box-sizing: border-box; }
body { margin:0; font-family:"Segoe UI",system-ui,-apple-system,sans-serif; color:var(--text); background:var(--cream); line-height:1.55; }
a { color:var(--navy); } a:hover { color:var(--copper); }
.site-header { background:var(--navy); color:#fff; padding:1rem 1.25rem; }
.site-header a { color:#fff; text-decoration:none; margin-right:1rem; font-size:0.95rem; }
.site-header .brand { font-weight:700; color:#f0c29a; margin-right:1.5rem; }
.wrap { max-width:920px; margin:0 auto; padding:1.5rem 1.25rem 3rem; }
h1,h2,h3 { color:var(--navy); line-height:1.25; } h1 { font-size:1.7rem; margin-top:0.15rem; margin-bottom:0.5rem; }
.card { background:#fff; border:1px solid #e6dcc8; border-radius:12px; padding:1rem 1.15rem; margin:0.75rem 0; box-shadow:0 1px 2px rgba(31,58,95,0.06); }
.card h2 { margin-top:0; font-size:1.1rem; }
table { width:100%; border-collapse:collapse; font-size:0.88rem; background:#fff; display:block; overflow-x:auto; }
th,td { border:1px solid #e0d6c2; padding:0.45rem 0.55rem; text-align:left; vertical-align:top; }
th { background:#f3ebe0; color:var(--navy); }
blockquote { border-left:4px solid var(--copper); margin:1rem 0; padding:0.4rem 0.9rem; background:#fff; }
.site-footer { background:var(--navy); color:#d7e6f5; padding:1.25rem; font-size:0.9rem; }
.site-footer a { color:#f0c29a; }
.cta { display:inline-block; background:var(--copper); color:#fff !important; padding:0.65rem 1.1rem; border-radius:8px; text-decoration:none; font-weight:600; }
.grid { display:grid; gap:0.75rem; }
.grid .card { margin:0; }
@media (min-width:700px){ .grid-2 { grid-template-columns:1fr 1fr; } }
.meta-note { font-size:0.85rem; color:#555; }
pre { background:#fff; padding:0.75rem; overflow-x:auto; border-radius:8px; border:1px solid #e6dcc8; }
hr { border:none; border-top:1px solid #e0d6c2; margin:1.5rem 0; }

.site-header { display:flex; flex-wrap:wrap; align-items:center; row-gap:0.35rem; }
.disclosure { font-size:0.85rem; color:#d7e6f5; max-width:52rem; }
.site-footer .disclosure { margin:0.6rem 0 0; }
.app-grid { display:grid; gap:0.75rem; }
@media (min-width:700px){ .app-grid { grid-template-columns:1fr 1fr; } }
.app-card h3 { margin:0 0 0.25rem; font-size:1.15rem; }
.app-card p { margin:0.4rem 0 0; font-size:0.92rem; }
.code-box {
  display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap;
  background:#f3ebe0; border:1px solid #e6dcc8; border-radius:8px;
  padding:0.5rem 0.65rem; margin:0.55rem 0 0.35rem;
}
.code-box code, .code-value {
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:1.2rem; font-weight:700; letter-spacing:0.04em; color:var(--navy);
  overflow-wrap:anywhere;
}
.code-box .code-link { font-size:0.85rem; font-weight:600; letter-spacing:0; word-break:break-all; }
.copy-btn, .join-btn {
  appearance:none; border:0; cursor:pointer;
  background:var(--copper); color:#fff; font-weight:700;
  padding:0.4rem 0.75rem; border-radius:6px; font-size:0.9rem;
  text-decoration:none; display:inline-block;
}
.copy-btn:hover, .join-btn:hover { filter:brightness(1.05); }
.copy-btn[data-copied="true"] { background:var(--green); }
.referral-actions { margin-top:0.65rem; display:flex; flex-wrap:wrap; gap:0.65rem 1rem; align-items:center; }
.how-link { font-weight:700; }
.referral-nudge { margin-top:1.25rem; }
.referral-nudge p { margin:0; }
.app-steps { margin:0.5rem 0 1rem; padding-left:1.25rem; }
.app-steps li { margin:0.35rem 0; }
.sources { font-size:0.9rem; }
.sources li { margin:0.3rem 0; }

.referral-section { margin:0.55rem 0 1.25rem; }
.referral-section > p { margin:0.2rem 0 0.65rem; }
.app-card { padding:0.8rem 0.95rem; }
@media (max-width:699px){
  .site-header { padding:0.7rem 0.9rem; }
  .site-header a { margin-right:0.7rem; font-size:0.88rem; }
  .code-box .code-link { font-size:0.78rem; }
  .wrap { padding-top:0.8rem; padding-bottom:2.25rem; }
  h1 { margin-bottom:0.35rem; }
  .referral-section { margin:0.35rem 0 1rem; }
  .app-card { padding:0.7rem 0.85rem; }
  .more-ways-wrap { margin:0.55rem 0 0.25rem; }
  .app-grid { gap:0.55rem; }
  .more-ways-btn { padding:0.65rem 1.1rem; }
}

.more-ways-wrap { margin: 0.9rem 0 0.35rem; }
.more-ways-btn { font-size: 1.05rem; padding: 0.75rem 1.25rem; }
.more-ways-dialog {
  border: none;
  padding: 0;
  background: var(--cream);
  color: var(--text);
  border-radius: 14px;
  width: min(40rem, calc(100vw - 1.5rem));
  max-height: calc(100vh - 1.5rem);
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(31,58,95,0.28);
}
.more-ways-dialog::backdrop { background: rgba(31,58,95,0.55); }
.more-ways-inner {
  position: relative;
  padding: 1.2rem 1.2rem 1.35rem;
  max-height: calc(100vh - 1.5rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.more-ways-dialog h2 { margin: 0 2.5rem 0.5rem 0; font-size: 1.35rem; }
.more-ways-inner > p { margin: 0 0 0.85rem; }
.dialog-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--navy);
  font-size: 1.7rem;
  line-height: 1;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
}
.dialog-close:hover, .dialog-close:focus-visible {
  background: #f3ebe0;
  outline: 2px solid var(--navy);
  outline-offset: 1px;
}
.modal-grid { display: grid; gap: 0.75rem; margin-bottom: 0.85rem; }
@media (min-width:700px){
  .modal-grid { grid-template-columns: 1fr 1fr; }
  .modal-grid .newsletter-card { grid-column: 1 / -1; }
}
body.modal-open { overflow: hidden; }

/* Fallback overlay when <dialog>.showModal() is unavailable */
.more-ways-dialog[data-legacy][open] {
  display: flex;
  position: fixed;
  inset: 0;
  width: auto;
  max-width: none;
  height: auto;
  max-height: none;
  margin: 0;
  border-radius: 0;
  background: rgba(31,58,95,0.55);
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  z-index: 1000;
  overflow: auto;
  box-shadow: none;
}
.more-ways-dialog[data-legacy][open] .more-ways-inner {
  background: var(--cream);
  border-radius: 14px;
  width: min(40rem, 100%);
  max-height: calc(100vh - 1.5rem);
  box-shadow: 0 10px 40px rgba(31,58,95,0.28);
}
@media (max-width:699px){
  .more-ways-btn { width: 100%; text-align: center; }
  .more-ways-dialog { width: calc(100vw - 1.25rem); }
  .more-ways-inner { padding: 1rem 0.95rem 1.15rem; }
}