/*
 * Public pages (contact, privacy, terms) in the v2 talk page's look
 * (web/talk/index.php): the same tokens, tinted navbar, centred heading,
 * cards, fields and pill buttons. Scoped under .site so nothing leaks into
 * pages that still use plain Bootstrap. logIn.php carries the same look inline.
 */
.site{
    --bg:#f4f6f8;
    --surface:#ffffff;
    --ink:#10151c;
    --ink-soft:#59636f;
    --ink-faint:#8b95a1;
    --line:#dfe4ea;
    --line-strong:#c7cfd9;
    --accent:#2f4f9e;
    --accent-ink:#ffffff;
    --accent-wash:#eaeff9;
    --danger:#c0392b;

    background:var(--bg);
    color:var(--ink);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
    min-height:100vh;
    display:flex;flex-direction:column;
}
@media (prefers-color-scheme: dark){
    .site{
        --bg:#0e1217;
        --surface:#171d25;
        --ink:#e8edf3;
        --ink-soft:#a3aeba;
        --ink-faint:#78838f;
        --line:#28303a;
        --line-strong:#3a4451;
        --accent:#7ea3e8;
        --accent-ink:#0e1217;
        --accent-wash:#1a2331;
        --danger:#ef7b6e;
        color-scheme:dark;
    }
    /* Bootstrap draws the hamburger in dark ink; flip it for the dark header. */
    .site .navbar-toggler-icon{filter:invert(1) brightness(1.6);}
}
.site a{color:var(--accent);text-decoration:none;}
.site a:hover{text-decoration:underline;}
.site :focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
@media (prefers-reduced-motion: reduce){
    .site *{transition:none!important;}
}

/* ---------- header: the shared navbar, tinted as on the talk page ---------- */
.site .navbar{
    background:var(--surface);border-bottom:1px solid var(--line);
    padding:12px 8px;
}
.site .navbar-brand span{color:var(--ink)!important;}
.site .navbar .nav-link{color:var(--ink-soft);}
.site .navbar .nav-link em{color:var(--ink-faint)!important;}
.site .navbar .form-control{
    padding:8px 12px;font-size:15px;
    color:var(--ink);background:var(--bg);
    border:1px solid var(--line-strong);border-radius:9px;
}
.site .navbar .form-control::placeholder{color:var(--ink-faint);}
.site .navbar .btn-outline-success{
    border-color:var(--line-strong);color:var(--ink);
    border-radius:9px;padding:8px 16px;font-size:15px;font-weight:550;
}
.site .navbar .btn-outline-success:hover{background:var(--accent-wash);border-color:var(--ink-faint);color:var(--ink);}
.site .dropdown-menu{
    background:var(--surface);border:1px solid var(--line);border-radius:12px;
    box-shadow:0 10px 30px -14px rgba(0,0,0,.25);padding:6px;
}
.site .dropdown-item{color:var(--ink);border-radius:8px;font-size:14.5px;padding:7px 12px;}
.site .dropdown-item:hover{background:var(--accent-wash);color:var(--ink);text-decoration:none;}
.site .dropdown-divider{border-color:var(--line);}
.site .navbar-toggler{border-color:var(--line-strong);}

/* ---------- page: the talk page's empty-state heading over a card ---------- */
.site-main{flex:1;width:100%;max-width:820px;margin:0 auto;padding:56px 20px 40px;}
.site-main.is-narrow{max-width:600px;}
.site-intro{text-align:center;margin-bottom:28px;}
.site-intro h1{
    font-size:clamp(28px,4vw,40px);line-height:1.1;letter-spacing:-.03em;
    font-weight:600;margin:0 0 12px;text-wrap:balance;
}
.site-sub{font-size:17px;line-height:1.55;color:var(--ink-soft);margin:0 auto;max-width:52ch;}
.site-sub + .site-sub{margin-top:6px;}
.site-sub a{font-weight:600;}

.site-card{
    background:var(--surface);border:1px solid var(--line);border-radius:16px;
    padding:32px 36px;
    box-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 32px -16px rgba(0,0,0,.14);
}

/* ---------- long-form documents (privacy, terms) ---------- */
.site-prose{font-size:16px;line-height:1.7;color:var(--ink);overflow-wrap:anywhere;}
.site-prose h2{
    font-size:19px;line-height:1.3;font-weight:650;letter-spacing:-.01em;
    margin:40px 0 12px;scroll-margin-top:20px;
}
.site-prose > h2:first-child{margin-top:0;}
.site-prose h3{font-size:16px;line-height:1.4;font-weight:650;margin:28px 0 8px;}
.site-prose p{margin:0 0 14px;}
.site-prose ul{margin:0 0 16px;padding-left:22px;}
.site-prose li{margin:4px 0;}
.site-prose li::marker{color:var(--ink-faint);}
.site-prose strong{font-weight:650;}
.site-prose .site-short{
    color:var(--ink-soft);background:var(--bg);border-left:3px solid var(--line-strong);
    padding:10px 14px;border-radius:0 10px 10px 0;
}
.site-prose hr{border:0;border-top:1px solid var(--line);margin:28px 0;opacity:1;}
.site-toc{
    list-style:none;margin:0 0 8px;padding:6px;
    background:var(--bg);border:1px solid var(--line);border-radius:12px;
}
.site .site-toc a{display:block;padding:7px 12px;border-radius:8px;font-size:14.5px;line-height:1.45;color:var(--ink-soft);}
.site .site-toc a:hover{background:var(--accent-wash);color:var(--ink);text-decoration:none;}
.site-table{overflow-x:auto;margin:0 0 18px;border:1px solid var(--line);border-radius:12px;}
.site-table table{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.5;}
.site-table th,.site-table td{padding:10px 14px;text-align:left;vertical-align:top;border-top:1px solid var(--line);}
.site-table thead th{border-top:0;background:var(--bg);font-weight:650;color:var(--ink-soft);}
/* Yes/No is a short value: centred, like every numeric-ish column on the site. */
.site-table th:last-child,.site-table td:last-child{text-align:center;white-space:nowrap;}

/* ---------- forms: fields in the talk composer's style ---------- */
.site-field{margin-bottom:18px;}
.site-field label{display:block;font-size:14px;font-weight:550;color:var(--ink-soft);margin:0 0 6px;}
.site-input{
    display:block;width:100%;padding:11px 14px;
    font:inherit;font-size:16px;line-height:1.5;
    color:var(--ink);background:var(--bg);
    border:1px solid var(--line-strong);border-radius:12px;
    transition:border-color .15s;
}
.site-input::placeholder{color:var(--ink-faint);}
.site-input:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent;}
textarea.site-input{min-height:132px;resize:vertical;}
.site-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    border:0;border-radius:999px;padding:13px 28px;
    font:inherit;font-size:16px;font-weight:600;
    background:var(--accent);color:var(--accent-ink);cursor:pointer;transition:opacity .15s;
}
.site-btn:hover{opacity:.88;}
/* A link drawn as a button keeps the button's ink (.site a would otherwise win). */
.site a.site-btn,.site a.site-btn:hover{color:var(--accent-ink);text-decoration:none;}
/* The contact form's own thank-you markup (Bootstrap alert classes) drawn as a calm note. */
.site-card .alert{background:none;border:0;padding:0;margin:0 0 6px;color:var(--ink);font-size:24px;font-weight:600;}
.site-card .alert + p{color:var(--ink-soft);margin:0;}

/* ---------- footer: draw_site_footer(); every link answers 200 logged out ---------- */
.site-foot{
    display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;
    padding:24px 16px calc(24px + env(safe-area-inset-bottom, 0px));
    font-size:13.5px;color:var(--ink-faint);
}
.site .site-foot a{color:var(--ink-soft);}
.site .site-foot a:hover{color:var(--accent);text-decoration:none;}

.site-table table{overflow-wrap:normal;}

/* ---------- pricing (getCredits.php) ----------
   draw_buy_credits_container() prints Bootstrap cards that the homepage shares,
   so the markup stays as it is and only this page's look changes: Bootstrap's own
   card and button variables are pointed at the tokens above. */
.site-main.is-wide{max-width:1000px;}
.site-pricing .container{max-width:none;padding:0;margin-top:0!important;}
.site-pricing h1{
    font-size:clamp(28px,4vw,40px);line-height:1.1;letter-spacing:-.03em;
    font-weight:600;margin:0 0 28px;text-wrap:balance;
}
.site-pricing h2{font-size:24px;line-height:1.2;letter-spacing:-.02em;font-weight:600;}
/* With a subscription the heading is a sentence, a Cancel button and a note. */
.site-pricing .row > h4{font-size:24px;line-height:1.25;letter-spacing:-.02em;font-weight:600;margin:0 0 14px;}
.site-pricing .row > div.text-center:not([class*="col-"]){color:var(--ink-soft);}
.site-pricing .btn-danger{
    --bs-btn-bg:transparent;--bs-btn-color:var(--danger);--bs-btn-border-color:var(--danger);
    --bs-btn-hover-bg:var(--danger);--bs-btn-hover-color:#fff;--bs-btn-hover-border-color:var(--danger);
    border-radius:999px;padding:6px 18px!important;font-size:14.5px;font-weight:600;
}
/* It is a link, and .site a would otherwise paint it in the accent. */
.site-pricing a.btn-danger{color:var(--danger);}
.site-pricing a.btn-danger:hover{color:#fff;text-decoration:none;}

.site-pricing .card{
    --bs-card-bg:var(--surface);--bs-card-color:var(--ink);--bs-card-cap-bg:transparent;
    --bs-card-border-color:var(--line);--bs-card-border-radius:16px;--bs-card-inner-border-radius:15px;
    color:var(--ink);
    box-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 32px -16px rgba(0,0,0,.14)!important;
}
.site-pricing .card-header{border-bottom:0;padding:22px 20px 0;}
.site-pricing .card-header h4{font-size:17px;font-weight:600;color:var(--ink);}
.site-pricing .card-body{padding:6px 20px 24px;}
.site-pricing .pricing-card-title{
    font-size:42px;line-height:1.15;letter-spacing:-.03em;font-weight:650;
    margin:2px 0 20px;font-variant-numeric:tabular-nums;
}
.site-pricing .pricing-card-title small{color:var(--ink-soft);font-weight:500;letter-spacing:0;margin-left:2px;}
.site-pricing .card form{margin:0!important;}
.site-pricing .card .btn{
    width:100%;border-radius:999px;padding:12px 20px;font-size:16px;font-weight:600;
    --bs-btn-focus-box-shadow:0 0 0 3px var(--accent-wash);
}
.site-pricing .btn-primary{
    --bs-btn-bg:var(--accent);--bs-btn-color:var(--accent-ink);--bs-btn-border-color:var(--accent);
    --bs-btn-hover-bg:var(--accent);--bs-btn-hover-color:var(--accent-ink);--bs-btn-hover-border-color:var(--accent);
    --bs-btn-active-bg:var(--accent);--bs-btn-active-color:var(--accent-ink);--bs-btn-active-border-color:var(--accent);
    transition:opacity .15s;
}
.site-pricing .btn-primary:hover{opacity:.88;}
.site-pricing .btn-outline-primary{
    --bs-btn-bg:transparent;--bs-btn-color:var(--accent);--bs-btn-border-color:var(--line-strong);
    --bs-btn-hover-bg:var(--accent-wash);--bs-btn-hover-color:var(--accent);--bs-btn-hover-border-color:var(--accent);
    --bs-btn-active-bg:var(--accent-wash);--bs-btn-active-color:var(--accent);--bs-btn-active-border-color:var(--accent);
}
/* A plan's savings line reads as a badge; "Cancel Any Time" as fine print under it. */
.site-pricing .card form > .text-muted:not(.small){
    display:inline-block;margin-top:14px;padding:3px 11px;border-radius:999px;
    background:var(--accent-wash);color:var(--accent)!important;font-size:13px;font-weight:600!important;
}
.site-pricing .card form > .small.text-muted{color:var(--ink-faint)!important;font-size:13px;margin-top:8px;}

@media (max-width:640px){
    .site-main{padding:36px 16px 28px;}
    .site-card{padding:22px 18px;border-radius:14px;}
    .site-prose{font-size:15.5px;}
    /* Three columns don't fit a phone: each row stacks, and the hidden header's
       "Collected" labels the yes/no. */
    .site-table thead{display:none;}
    .site-table tr{display:block;padding:12px 14px;border-top:1px solid var(--line);}
    .site-table tbody tr:first-child{border-top:0;}
    .site-table td{display:block;border:0;padding:0;}
    .site-table td:first-child{font-weight:650;margin-bottom:2px;}
    .site-table td:last-child{text-align:left;margin-top:6px;color:var(--ink-soft);font-size:13.5px;}
    .site-table td:last-child::before{content:"Collected: ";color:var(--ink-faint);}
}