/* Tandem additions on top of the PayTime-derived site.css. Same tokens, same dark-mode rules. */

/* Logo: mark + wordmark */
.tandem-logo{ display:inline-flex; align-items:center; gap:10px; height:var(--logo-h,34px); }
.tandem-mark{ height:100%; width:auto; display:block; border-radius:28%; box-shadow:0 8px 18px -8px rgba(46,107,255,.55); }
.tandem-word{ font-family:var(--disp); font-weight:800; font-size:calc(var(--logo-h,34px) * .62); letter-spacing:-.02em; color:var(--ink); line-height:1; }
.tandem-word span{ margin-left:.22em; background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:700; }
footer .tandem-word{ color:#fff; }
footer .tandem-word span{ background:linear-gradient(120deg,#8FC2FF,#B69BFF); -webkit-background-clip:text; background-clip:text; }

/* Missing from site.css but used by PayTime's post page */
.btn-ghost{ background:transparent; color:var(--ink); border:1px solid var(--line-2); }
.btn-ghost:hover{ border-color:var(--blue); color:var(--blue); }

/* Hero: a channel preview in the calculator's card frame */
.hp-badge{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.45); border-radius:100px; padding:5px 11px; white-space:nowrap; }
.hp-tabs{ display:flex; gap:6px; padding:12px 18px 0; border-bottom:1px solid var(--line); }
.hp-tabs span{ font-size:13px; font-weight:600; color:var(--muted); padding:8px 12px; border-bottom:2px solid transparent; }
.hp-tabs span.on{ color:var(--blue); border-color:var(--blue); }
.hp-feed{ padding:16px 20px 6px; display:flex; flex-direction:column; gap:14px; }
.hp-msg{ display:flex; gap:11px; align-items:flex-start; }
.hp-av{ width:34px; height:34px; border-radius:10px; flex-shrink:0; display:grid; place-items:center; color:#fff; font-family:var(--disp); font-weight:700; font-size:12.5px; background:var(--cg,var(--g-blue)); }
.hp-who{ font-family:var(--disp); font-weight:650; font-size:13.5px; color:var(--ink); }
.hp-who small{ font-family:var(--body); font-weight:500; color:var(--muted); font-size:11.5px; margin-left:6px; }
.hp-who .guest{ font-family:var(--mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--amber); background:var(--tint-amber); border-radius:6px; padding:2px 6px; margin-left:6px; }
.hp-tx{ font-size:13.5px; color:var(--ink-2); line-height:1.45; margin-top:2px; }
.hp-file{ display:inline-flex; align-items:center; gap:8px; margin-top:7px; border:1px solid var(--line); border-radius:10px; padding:7px 11px; font-size:12.5px; color:var(--ink); background:var(--bg-alt); }
.hp-file svg{ width:16px; height:16px; color:var(--rose); }
.hp-task{ display:flex; align-items:center; gap:9px; margin-top:7px; border:1px solid var(--line); border-radius:10px; padding:8px 11px; font-size:12.5px; background:var(--bg-alt); }
.hp-task .ck{ width:16px; height:16px; border-radius:5px; border:2px solid var(--emerald); flex-shrink:0; }
.hp-task .due{ margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--muted); }
.hp-react{ display:inline-flex; gap:6px; margin-top:6px; }
.hp-react span{ font-size:12px; border:1px solid var(--line); border-radius:100px; padding:2px 8px; background:var(--surface); color:var(--ink-2); }
.hp-compose{ margin:8px 18px 18px; border:1px solid var(--line-2); border-radius:12px; padding:11px 14px; font-size:13.5px; color:var(--muted); display:flex; justify-content:space-between; align-items:center; }
.hp-compose svg{ width:17px; height:17px; color:var(--blue); }

/* Plan table extras */
.ptable .per{ font-family:var(--mono); font-size:12px; color:var(--muted); margin-left:4px; }
.ptable td.meta{ color:var(--ink-2); font-size:14px; }
.incl{ background:var(--surface); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); padding:28px; }
.incl h3{ font-size:19px; margin-bottom:6px; }
.incl p{ color:var(--ink-2); font-size:14px; margin-bottom:16px; }
.incl ul{ list-style:none; padding:0; margin:0; display:grid; gap:11px; }
.incl li{ display:flex; gap:10px; font-size:14.5px; color:var(--ink-2); align-items:flex-start; }
.incl li .ck{ width:20px; height:20px; border-radius:6px; background:var(--tint-emerald); color:var(--emerald); display:grid; place-items:center; flex-shrink:0; margin-top:1px; }
.incl li .ck svg{ width:12px; height:12px; }

/* Forms: errors, address field, select, checkbox */
.field .err{ display:block; color:var(--rose); font-size:13px; margin-top:6px; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .addr-field.bad{ border-color:var(--rose); }
.field select{ width:100%; border:1px solid var(--line-2); border-radius:11px; padding:13px 14px; font-family:var(--body); font-size:15px; color:var(--ink); background:var(--bg); outline:none; }
.field .hint{ display:block; color:var(--muted); font-size:12.5px; margin-top:6px; }
.field .hint.ok{ color:var(--emerald); }
.field .hint.bad{ color:var(--rose); }
.addr-field{ display:flex; align-items:center; border:1px solid var(--line-2); border-radius:11px; background:var(--bg); overflow:hidden; transition:border-color .15s, box-shadow .15s; }
.addr-field:focus-within{ border-color:var(--blue); box-shadow:0 0 0 3px var(--tint-blue); }
.addr-field input{ border:0 !important; box-shadow:none !important; border-radius:0 !important; min-width:0; flex:1; background:transparent !important; }
.addr-field .sfx{ padding:0 14px; color:var(--muted); font-size:14.5px; white-space:nowrap; }
.check{ display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--ink-2); margin:4px 0 18px; }
.check input{ width:18px; height:18px; margin-top:2px; accent-color:var(--blue); flex-shrink:0; }
.check a{ color:var(--blue); text-decoration:underline; }
.form-err{ background:var(--tint-rose); border:1px solid color-mix(in srgb,var(--rose) 30%,transparent); color:var(--rose); border-radius:12px; padding:13px 16px; font-size:14.5px; font-weight:560; margin-bottom:18px; }
.hp-hide{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
.narrow{ max-width:560px; margin:0 auto; }
.cform .alt{ text-align:center; color:var(--ink-2); font-size:14px; margin-top:18px; }
.cform .alt a{ color:var(--blue); font-weight:600; }

/* Plain message pages (sent, failed, unavailable) */
.msg-page{ text-align:center; max-width:640px; margin:0 auto; }
.msg-page .mi{ width:64px; height:64px; border-radius:18px; margin:0 auto 20px; display:grid; place-items:center; color:#fff; background:var(--cg,var(--g-blue)); box-shadow:0 14px 28px -10px var(--cshadow,rgba(46,107,255,.5)); }
.msg-page .mi svg{ width:30px; height:30px; }
.msg-page p{ color:var(--ink-2); margin-top:12px; font-size:16px; }
.msg-page .hero-cta{ justify-content:center; margin-top:26px; }
.msg-page a:not(.btn){ color:var(--blue); font-weight:600; }

/* Guide articles: code and tables */
.article-body code{ font-family:var(--mono); font-size:.88em; background:var(--tint-blue); color:var(--blue-d); padding:2px 6px; border-radius:6px; }
.article-body ol{ padding-left:22px; margin:0 0 18px; color:var(--ink-2); }
.article-body ol li{ margin-bottom:8px; line-height:1.65; }
.blog-grid .bcard p:empty{ display:none; }

a.sol{ color:inherit; text-decoration:none; }

/* site.css's .hero-in and .hl-grid set `padding: Npx 0`, after .wrap, which drops the side gutter
   below 1256px wide (the hero text then touches the screen edge). Put the gutter back. */
.wrap.hero-in, .wrap.hl-grid{ padding-left:28px; padding-right:28px; }
/* Same origin as above: in site.css's two-column phone footer, the brand text (max 30ch) widens
   column one and pushes column two off-screen. Give the brand its own row. */
@media (max-width:820px){ .foot-brand{ grid-column:1 / -1; } .foot-col{ min-width:0; overflow-wrap:break-word; } }

/* Plan table: four columns and two-line cells. site.css makes .tier a flex box, which takes it out of
   table layout (misaligned names, a gap in the highlighted row's background). Keep it a table cell. */
.ptable th, .ptable td{ padding-left:18px; padding-right:18px; vertical-align:middle; }
.ptable td.tier{ display:table-cell; white-space:nowrap; }
.ptable td.tier .best-tag{ display:inline-block; margin-left:8px; vertical-align:middle; }
@media (max-width:600px){ .ptable th, .ptable td{ padding-left:12px; padding-right:12px; font-size:14px; } .ptable td.tier{ white-space:normal; } .ptable td.tier .best-tag{ margin:6px 0 0; } }

/* Hero: a shorter channel preview (about 25% less than the first version) and a shorter hero. */
.hero .calc .calc-head{ padding:11px 18px; }
.hero .calc .calc-head .t{ font-size:15px; }
.hero .calc .calc-head .t .ic{ width:28px; height:28px; }
.hp-tabs{ padding:6px 14px 0; }
.hp-tabs span{ padding:6px 10px; font-size:12.5px; }
.hp-feed{ padding:12px 16px 4px; gap:10px; }
.hp-msg{ gap:9px; }
.hp-av{ width:28px; height:28px; border-radius:8px; font-size:11px; }
.hp-who{ font-size:13px; line-height:1.3; }
.hp-tx{ font-size:12.5px; line-height:1.4; margin-top:1px; }
.hp-file, .hp-task{ margin-top:5px; padding:5px 9px; font-size:12px; }
.hp-react{ margin-top:4px; }
.hp-react span{ font-size:11px; padding:1px 7px; }
.hp-compose{ margin:6px 14px 12px; padding:8px 12px; font-size:12.5px; }
.wrap.hero-in{ padding-top:34px; padding-bottom:38px; }
.hero .slider{ min-height:300px; }
.hero .slide h1, .hero .slide h2{ margin-top:14px; font-size:clamp(32px,3.9vw,48px); }
.hero .slide p{ margin-top:14px; font-size:17px; }
.hero .slider-nav{ margin-top:24px; }
.hp-feed{ gap:8px; padding-top:10px; }
.hero .calc .calc-head{ padding:9px 16px; }