/* ============================================================
   TOOLS PAGE — tools.css
   Page-specific styles. Uses global CSS variables.
   All new classes prefixed .tl-
   ============================================================ */

/* ── Page wrapper ─────────────────────────────────────────── */
.tl-page {
    max-width: 1280px;
    margin:    0 auto;
    padding:   calc(var(--sp-16) + 64px) var(--sp-8) var(--sp-20);
    position:  relative;
}

/* Radial glow — fixed background accent */
.tl-page::before {
    content:       '';
    position:      fixed;
    top:           0;
    right:         0;
    width:         60vw;
    height:        60vw;
    background:    radial-gradient(circle at 80% 20%, rgba(202,255,111,0.03) 0%, transparent 50%);
    pointer-events: none;
    z-index:       0;
}

/* ── Hero ─────────────────────────────────────────────────── */
.tl-hero {
    margin-bottom: var(--sp-16);
    position:      relative;
    z-index:       1;
}

.tl-h1 {
    font-family:    var(--font-display);
    font-size:      clamp(3rem, 7vw, 6rem);
    font-weight:    700;
    letter-spacing: -0.04em;
    line-height:    0.95;
    color:          #fff;
    margin-top:     var(--sp-5);
    margin-bottom:  var(--sp-6);
}

.tl-h1 em {
    font-style: italic;
    color:      var(--clr-green);
}

.tl-hero-sub {
    font-family: var(--font-body);
    font-size:   1.0625rem;
    color:       rgba(255,255,255,0.42);
    line-height: 1.7;
    font-weight: 300;
    max-width:   600px;
}

/* ── Workspace grid ───────────────────────────────────────── */
.tl-workspace {
    display:     grid;
    gap:         var(--sp-8);
    align-items: start;
    position:    relative;
    z-index:     1;
    grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
    .tl-workspace { grid-template-columns: 256px 1fr; }
}

/* ── Sidebar ──────────────────────────────────────────────── */
.tl-sidebar {
    display:  none;
    position: sticky;
    top:      90px;
}

@media (min-width: 1024px) {
    .tl-sidebar { display: block; }
}

.tl-sidebar-inner {
    background:    #0a0a0a;
    border:        1px solid rgba(255,255,255,0.06);
    border-radius: var(--r-xl);
    padding:       var(--sp-5);
}

.tl-sidebar-group { margin-bottom: var(--sp-5); }
.tl-sidebar-group:last-child { margin-bottom: 0; }

.tl-sidebar-group-label {
    font-family:    var(--font-display);
    font-size:      0.5rem;
    font-weight:    700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color:          rgba(202,255,111,0.45);
    padding:        var(--sp-2) var(--sp-3);
    margin-bottom:  var(--sp-1);
    display:        block;
}

.tl-sidebar-item {
    display:      flex;
    align-items:  center;
    gap:          var(--sp-3);
    padding:      var(--sp-3) var(--sp-3);
    border-radius: var(--r-lg);
    cursor:       pointer;
    border:       none;
    border-left:  2px solid transparent;
    background:   transparent;
    width:        100%;
    text-align:   left;
    color:        rgba(255,255,255,0.45);
    transition:   background 0.2s, color 0.2s, border-color 0.2s;
    margin-bottom: 2px;
}

.tl-sidebar-item:hover {
    background: rgba(255,255,255,0.04);
    color:      rgba(255,255,255,0.8);
}

.tl-sidebar-item.is-active {
    background:   rgba(202,255,111,0.08);
    color:        var(--clr-green);
    border-color: var(--clr-green);
}

.tl-sidebar-item-icon {
    flex-shrink: 0;
    width:       16px;
    height:      16px;
    stroke:      currentColor;
    fill:        none;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tl-sidebar-item-name {
    font-family: var(--font-display);
    font-size:   0.8125rem;
    font-weight: 600;
    line-height: 1;
}

/* ── Mobile tool selector ─────────────────────────────────── */
.tl-mobile-selector { margin-bottom: var(--sp-6); }

@media (min-width: 1024px) {
    .tl-mobile-selector { display: none; }
}

.tl-mobile-select {
    width:            100%;
    background:       #0a0a0a;
    border:           1px solid rgba(255,255,255,0.1);
    border-radius:    var(--r-lg);
    padding:          var(--sp-4) var(--sp-5);
    font-family:      var(--font-display);
    font-size:        0.9375rem;
    color:            #fff;
    cursor:           pointer;
    appearance:       none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='rgba(255,255,255,0.3)' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right var(--sp-5) center;
    background-size:  12px;
    outline:          none;
}

.tl-mobile-select option { background: #1a1a1a; color: #fff; }

/* ── Tool panel ───────────────────────────────────────────── */
.tl-panel { min-height: 500px; }

.tl-tool { display: none; }

.tl-tool.is-active {
    display:   block;
    animation: tl-fadein 0.22s ease;
}

@keyframes tl-fadein {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* ── Tool card ────────────────────────────────────────────── */
.tl-card {
    background:    #0a0a0a;
    border:        1px solid rgba(255,255,255,0.06);
    border-radius: var(--r-xl);
    padding:       var(--sp-10);
    position:      relative;
    overflow:      hidden;
}

.tl-card::before {
    content:       '';
    position:      absolute;
    top:           -60px;
    right:         -60px;
    width:         280px;
    height:        280px;
    background:    radial-gradient(circle, rgba(202,255,111,0.04) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.tl-card-header {
    display:         flex;
    justify-content: space-between;
    align-items:     flex-start;
    margin-bottom:   var(--sp-10);
    position:        relative;
    z-index:         1;
}

.tl-card-title {
    font-family:    var(--font-display);
    font-size:      1.5rem;
    font-weight:    700;
    color:          #fff;
    letter-spacing: -0.02em;
    margin-bottom:  var(--sp-2);
}

.tl-card-sub {
    font-family: var(--font-body);
    font-size:   0.875rem;
    color:       rgba(255,255,255,0.35);
}

.tl-card-icon {
    width:        28px;
    height:       28px;
    stroke:       var(--clr-green);
    fill:         none;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink:  0;
}

.tl-card-body { position: relative; z-index: 1; }

/* ── Labels ───────────────────────────────────────────────── */
.tl-label {
    font-family:    var(--font-display);
    font-size:      0.5625rem;
    font-weight:    700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color:          var(--clr-green);
    display:        block;
    margin-bottom:  var(--sp-3);
}

.tl-label-muted { color: rgba(255,255,255,0.3); }

/* ── Inputs ───────────────────────────────────────────────── */
.tl-field { display: flex; flex-direction: column; gap: var(--sp-2); }

.tl-input,
.tl-select,
.tl-textarea {
    width:         100%;
    background:    transparent;
    border:        none;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    padding:       var(--sp-3) 0;
    font-family:   var(--font-body);
    font-size:     0.9375rem;
    color:         #fff;
    outline:       none;
    transition:    border-color 0.25s;
    appearance:    none;
    -webkit-appearance: none;
}

.tl-input:focus,
.tl-select:focus,
.tl-textarea:focus { border-bottom-color: var(--clr-green); }

.tl-input::placeholder,
.tl-textarea::placeholder { color: rgba(255,255,255,0.2); }

.tl-textarea {
    resize:      vertical;
    min-height:  180px;
    line-height: 1.65;
}

.tl-select {
    cursor:              pointer;
    background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='rgba(255,255,255,0.3)' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 0 center;
    background-size:     12px;
    padding-right:       var(--sp-6);
}

.tl-select option { background: #1a1a1a; color: #fff; }

/* ── Two-col form grid ────────────────────────────────────── */
.tl-form-grid {
    display: grid;
    gap:     var(--sp-8);
}

.tl-form-grid--2col { grid-template-columns: 1fr; }

@media (min-width: 640px) {
    .tl-form-grid--2col { grid-template-columns: 1fr 1fr; }
}

/* ── Colour swatch + text input ───────────────────────────── */
.tl-color-row {
    display:       flex;
    align-items:   center;
    gap:           var(--sp-4);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid rgba(255,255,255,0.12);
    transition:    border-color 0.25s;
}

.tl-color-row:focus-within { border-bottom-color: var(--clr-green); }

.tl-color-swatch {
    position:      relative;
    width:         44px;
    height:        44px;
    border-radius: 8px;
    flex-shrink:   0;
    cursor:        pointer;
    box-shadow:    0 2px 10px rgba(0,0,0,0.5);
}

.tl-color-swatch input[type="color"] {
    position: absolute;
    inset:    0;
    opacity:  0;
    width:    100%;
    height:   100%;
    cursor:   pointer;
    padding:  0;
    border:   none;
}

.tl-color-text {
    background:     transparent;
    border:         none;
    font-family:    var(--font-display);
    font-size:      1.125rem;
    font-weight:    600;
    color:          #fff;
    outline:        none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex:           1;
    min-width:      0;
}

/* ── Sliders ──────────────────────────────────────────────── */
.tl-slider-row {
    display:     flex;
    align-items: center;
    gap:         var(--sp-4);
}

.tl-slider-label {
    font-family:    var(--font-display);
    font-size:      0.5rem;
    font-weight:    600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color:          rgba(255,255,255,0.3);
    width:          60px;
    flex-shrink:    0;
}

.tl-slider {
    flex:        1;
    appearance:  none;
    -webkit-appearance: none;
    height:      2px;
    background:  rgba(255,255,255,0.12);
    border-radius: 2px;
    outline:     none;
    cursor:      pointer;
}

.tl-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width:         15px;
    height:        15px;
    background:    var(--clr-green);
    border-radius: 50%;
    cursor:        pointer;
    transition:    transform 0.15s;
    box-shadow:    0 2px 8px rgba(202,255,111,0.4);
}

.tl-slider::-webkit-slider-thumb:hover { transform: scale(1.25); }

.tl-slider::-moz-range-thumb {
    width:        15px;
    height:       15px;
    background:   var(--clr-green);
    border-radius: 50%;
    cursor:       pointer;
    border:       none;
    box-shadow:   0 2px 8px rgba(202,255,111,0.4);
}

.tl-slider-val {
    font-family: var(--font-display);
    font-size:   0.75rem;
    font-weight: 600;
    color:       var(--clr-green);
    width:       42px;
    text-align:  right;
    flex-shrink: 0;
}

/* ── Code output box ──────────────────────────────────────── */
.tl-code-box {
    background:    #111311;
    border:        1px solid rgba(202,255,111,0.12);
    border-radius: var(--r-lg);
    padding:       var(--sp-5) var(--sp-5);
    font-family:   monospace;
    font-size:     0.8125rem;
    color:         var(--clr-green);
    word-break:    break-all;
    line-height:   1.6;
    min-height:    52px;
}

/* ── Buttons ──────────────────────────────────────────────── */
.tl-btn {
    display:        inline-flex;
    align-items:    center;
    gap:            var(--sp-2);
    font-family:    var(--font-display);
    font-size:      0.8125rem;
    font-weight:    700;
    letter-spacing: 0.03em;
    padding:        0.625rem 1.375rem;
    border:         none;
    border-radius:  var(--r-pill);
    cursor:         pointer;
    transition:     opacity 0.2s, transform 0.15s;
    text-decoration: none;
}

.tl-btn:active { transform: scale(0.97); }

.tl-btn-primary {
    background: var(--clr-green);
    color:      #0e0e0e;
    box-shadow: 0 6px 24px -4px rgba(202,255,111,0.3);
}

.tl-btn-primary:hover { opacity: 0.88; }

.tl-btn-secondary {
    background: rgba(255,255,255,0.06);
    color:      rgba(255,255,255,0.7);
    border:     1px solid rgba(255,255,255,0.1);
}

.tl-btn-secondary:hover { background: rgba(255,255,255,0.1); color: #fff; }

.tl-btn svg {
    width:        14px;
    height:       14px;
    stroke:       currentColor;
    fill:         none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ── WCAG badges ──────────────────────────────────────────── */
.tl-badge-row { display: flex; flex-direction: column; gap: var(--sp-3); }

.tl-badge {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    background:      rgba(255,255,255,0.04);
    border-radius:   var(--r-pill);
    padding:         var(--sp-3) var(--sp-5);
}

.tl-badge-name {
    font-family:    var(--font-display);
    font-size:      0.625rem;
    font-weight:    700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color:          rgba(255,255,255,0.45);
}

.tl-badge-result {
    font-family: var(--font-display);
    font-size:   0.75rem;
    font-weight: 700;
    display:     flex;
    align-items: center;
    gap:         var(--sp-2);
}

.tl-badge-result.pass { color: var(--clr-green); }
.tl-badge-result.fail { color: #ff6b6b; }

/* ── Contrast ratio number ────────────────────────────────── */
.tl-ratio {
    font-family:    var(--font-display);
    font-size:      clamp(3rem, 7vw, 4.5rem);
    font-weight:    700;
    letter-spacing: -0.04em;
    color:          var(--clr-green);
    line-height:    1;
}

/* ── Preview boxes ────────────────────────────────────────── */
.tl-preview {
    border:          1px solid rgba(255,255,255,0.08);
    border-radius:   var(--r-lg);
    padding:         var(--sp-10);
    display:         flex;
    align-items:     center;
    justify-content: center;
    min-height:      150px;
    transition:      background 0.3s, color 0.3s;
}

.tl-preview-center { text-align: center; }

/* ── Section divider ──────────────────────────────────────── */
.tl-divider {
    height:     1px;
    background: rgba(255,255,255,0.06);
    margin:     var(--sp-8) 0;
}

/* ── Stat cards (reading time) ────────────────────────────── */
.tl-stats-grid {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   var(--sp-4);
    margin-top:            var(--sp-8);
}

@media (min-width: 560px) {
    .tl-stats-grid { grid-template-columns: repeat(4, 1fr); }
}

.tl-stat-card {
    background:    rgba(255,255,255,0.03);
    border:        1px solid rgba(255,255,255,0.06);
    border-radius: var(--r-lg);
    padding:       var(--sp-5) var(--sp-4);
    text-align:    center;
}

.tl-stat-label {
    font-family:    var(--font-display);
    font-size:      0.5rem;
    font-weight:    700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color:          rgba(255,255,255,0.3);
    margin-bottom:  var(--sp-3);
    display:        block;
}

.tl-stat-value {
    font-family:    var(--font-display);
    font-size:      1.625rem;
    font-weight:    700;
    color:          var(--clr-green);
    letter-spacing: -0.02em;
    line-height:    1;
}

/* ── Google SERP preview ──────────────────────────────────── */
.tl-serp-wrap {
    background:    #fff;
    border-radius: var(--r-lg);
    padding:       var(--sp-5) var(--sp-6);
    margin-top:    var(--sp-4);
}

.tl-serp-url {
    font-family:    Arial, sans-serif;
    font-size:      0.8125rem;
    color:          #202124;
    margin-bottom:  2px;
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
}

.tl-serp-title {
    font-family:    Arial, sans-serif;
    font-size:      1.1875rem;
    color:          #1a0dab;
    margin-bottom:  3px;
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
    font-weight:    normal;
    line-height:    1.3;
}

.tl-serp-desc {
    font-family: Arial, sans-serif;
    font-size:   0.8125rem;
    color:       #4d5156;
    line-height: 1.5;
    display:     -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:    hidden;
}

/* OG card */
.tl-og-wrap {
    border:        1px solid rgba(255,255,255,0.1);
    border-radius: var(--r-lg);
    overflow:      hidden;
    margin-top:    var(--sp-4);
}

.tl-og-img {
    background:      linear-gradient(135deg, #1a1a1a, #222);
    height:          110px;
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.tl-og-img-label {
    font-family:    var(--font-display);
    font-size:      0.5rem;
    font-weight:    700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color:          rgba(255,255,255,0.18);
}

.tl-og-body  { background: #141414; padding: var(--sp-4) var(--sp-5); }

.tl-og-domain {
    font-family:    var(--font-display);
    font-size:      0.5625rem;
    font-weight:    600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          rgba(255,255,255,0.28);
    margin-bottom:  var(--sp-1);
}

.tl-og-title {
    font-family:   var(--font-display);
    font-size:     0.9375rem;
    font-weight:   700;
    color:         #fff;
    margin-bottom: var(--sp-1);
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

.tl-og-desc {
    font-family:   var(--font-body);
    font-size:     0.8125rem;
    color:         rgba(255,255,255,0.38);
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

/* ── Char counter hint ────────────────────────────────────── */
.tl-char-hint {
    font-family: var(--font-display);
    font-size:   0.5625rem;
    font-weight: 600;
    color:       rgba(255,255,255,0.22);
    text-align:  right;
    margin-top:  var(--sp-2);
    transition:  color 0.2s;
}

.tl-char-hint.is-warn { color: #f59e0b; }
.tl-char-hint.is-over { color: #ff6b6b; }

/* ── Toggle group (Linear / Radial) ───────────────────────── */
.tl-toggle-group {
    display:       flex;
    gap:           var(--sp-1);
    background:    rgba(255,255,255,0.04);
    border-radius: var(--r-pill);
    padding:       3px;
    width:         fit-content;
}

.tl-toggle-group input[type="radio"] { display: none; }

.tl-toggle-label {
    font-family:   var(--font-display);
    font-size:     0.8125rem;
    font-weight:   600;
    padding:       var(--sp-2) var(--sp-5);
    border-radius: var(--r-pill);
    cursor:        pointer;
    color:         rgba(255,255,255,0.4);
    transition:    background 0.2s, color 0.2s;
    user-select:   none;
}

.tl-toggle-group input[type="radio"]:checked + .tl-toggle-label {
    background: var(--clr-green);
    color:      #0e0e0e;
}

/* ── Checkbox ─────────────────────────────────────────────── */
.tl-checkbox-row {
    display:     flex;
    align-items: center;
    gap:         var(--sp-3);
    cursor:      pointer;
}

.tl-checkbox {
    width:        18px;
    height:       18px;
    border:       1.5px solid rgba(255,255,255,0.2);
    border-radius: 4px;
    background:   transparent;
    appearance:   none;
    -webkit-appearance: none;
    cursor:       pointer;
    flex-shrink:  0;
    transition:   background 0.2s, border-color 0.2s;
    position:     relative;
}

.tl-checkbox:checked { background: var(--clr-green); border-color: var(--clr-green); }

.tl-checkbox:checked::after {
    content:     '';
    position:    absolute;
    left:        4px;
    top:         1px;
    width:       6px;
    height:      10px;
    border:      2px solid #0e0e0e;
    border-top:  none;
    border-left: none;
    transform:   rotate(45deg);
}

.tl-checkbox-label {
    font-family: var(--font-display);
    font-size:   0.8125rem;
    font-weight: 600;
    color:       rgba(255,255,255,0.5);
}

/* ── QR output ────────────────────────────────────────────── */
.tl-qr-output {
    background:      #fff;
    border-radius:   var(--r-lg);
    padding:         var(--sp-6);
    display:         flex;
    align-items:     center;
    justify-content: center;
    min-height:      200px;
}

.tl-qr-placeholder {
    font-family:    var(--font-display);
    font-size:      0.5625rem;
    font-weight:    700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color:          rgba(0,0,0,0.2);
    text-align:     center;
}

/* ── Bottom CTA ───────────────────────────────────────────── */
.tl-cta {
    background:     var(--clr-green);
    border-radius:  var(--r-xl);
    padding:        var(--sp-12);
    margin-top:     var(--sp-20);
    display:        flex;
    flex-direction: column;
    gap:            var(--sp-6);
    position:       relative;
    z-index:        1;
    overflow:       hidden;
}

@media (min-width: 768px) {
    .tl-cta { flex-direction: row; align-items: center; justify-content: space-between; }
}

.tl-cta::before {
    content:       '';
    position:      absolute;
    right:         -40px;
    bottom:        -40px;
    width:         240px;
    height:        240px;
    background:    rgba(0,0,0,0.07);
    border-radius: 50%;
    pointer-events: none;
}

.tl-cta-body { max-width: 520px; position: relative; z-index: 1; }

.tl-cta-h2 {
    font-family:    var(--font-display);
    font-size:      clamp(1.75rem, 3vw, 2.5rem);
    font-weight:    700;
    color:          #0e0e0e;
    letter-spacing: -0.03em;
    line-height:    1.1;
    margin-bottom:  var(--sp-3);
}

.tl-cta-sub {
    font-family: var(--font-body);
    font-size:   0.9375rem;
    color:       rgba(0,0,0,0.52);
    line-height: 1.6;
}

.tl-cta-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             var(--sp-3);
    background:      #0e0e0e;
    color:           var(--clr-green);
    font-family:     var(--font-display);
    font-size:       0.9375rem;
    font-weight:     700;
    text-decoration: none;
    padding:         0.875rem 2rem;
    border-radius:   var(--r-pill);
    white-space:     nowrap;
    flex-shrink:     0;
    position:        relative;
    z-index:         1;
    transition:      opacity 0.2s;
}

.tl-cta-btn:hover { opacity: 0.85; }

.tl-cta-btn svg {
    width:        18px;
    height:       18px;
    stroke:       var(--clr-green);
    fill:         none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition:   transform 0.3s var(--ease-out);
}

.tl-cta-btn:hover svg { transform: translateX(3px); }

/* ── Shadow preview container ─────────────────────────────── */
.tl-shadow-preview-area {
    background:      rgba(255,255,255,0.02);
    border:          1px solid rgba(255,255,255,0.06);
    border-radius:   var(--r-lg);
    display:         flex;
    align-items:     center;
    justify-content: center;
    min-height:      200px;
    padding:         var(--sp-8);
}

.tl-shadow-box {
    width:         100px;
    height:        100px;
    background:    #fff;
    border-radius: 12px;
    transition:    box-shadow 0.25s;
    box-shadow:    20px 20px 40px 0px rgba(0,0,0,0.5);
}

/* ── Gradient preview ─────────────────────────────────────── */
.tl-gradient-preview {
    border-radius: var(--r-lg);
    height:        160px;
    margin-top:    var(--sp-6);
    transition:    background 0.3s;
    background:    linear-gradient(135deg, #caff6f, #0e0e0e);
}

/* ── Row spacing util ─────────────────────────────────────── */
.tl-stack { display: flex; flex-direction: column; gap: var(--sp-6); }

.tl-row-end {
    display:         flex;
    align-items:     center;
    justify-content: flex-end;
    gap:             var(--sp-3);
    margin-top:      var(--sp-4);
}

/* ── About blurb ──────────────────────────────────────────── */
.tl-about {
    margin-top:  var(--sp-6);
    padding:     var(--sp-5) var(--sp-6);
    border-left: 2px solid rgba(202,255,111,0.15);
}

.tl-about p {
    font-family: var(--font-body);
    font-size:   0.9rem;
    color:       rgba(255,255,255,0.35);
    line-height: 1.8;
    font-weight: 300;
}

.tl-about p code,
.tl-about p strong {
    font-family: monospace;
    font-size:   0.875rem;
    color:       rgba(202,255,111,0.7);
    background:  rgba(202,255,111,0.06);
    padding:     1px 5px;
    border-radius: 3px;
}

.tl-about p strong {
    font-family: var(--font-display);
    font-size:   inherit;
    font-weight: 600;
}

/* ── FAQ section ──────────────────────────────────────────── */
.tl-faq {
    margin-top: var(--sp-20);
    position:   relative;
    z-index:    1;
}

.tl-faq-header { margin-bottom: var(--sp-12); }

.tl-faq-h2 {
    font-family:    var(--font-display);
    font-size:      clamp(2rem, 4vw, 3.5rem);
    font-weight:    700;
    letter-spacing: -0.035em;
    color:          #fff;
    line-height:    1.05;
    margin-top:     var(--sp-5);
}

.tl-faq-h2 em {
    font-style: italic;
    color:      var(--clr-green);
}

.tl-faq-grid {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   var(--sp-1);
}

@media (min-width: 768px) {
    .tl-faq-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-1) var(--sp-6); }
}

.tl-faq-item {
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding:       var(--sp-7) 0;
}

.tl-faq-q {
    font-family:    var(--font-display);
    font-size:      1rem;
    font-weight:    700;
    color:          #fff;
    letter-spacing: -0.01em;
    margin-bottom:  var(--sp-3);
    line-height:    1.35;
}

.tl-faq-a {
    font-family: var(--font-body);
    font-size:   0.9rem;
    color:       rgba(255,255,255,0.38);
    line-height: 1.75;
    font-weight: 300;
}

.tl-faq-a code {
    font-family:   monospace;
    font-size:     0.8125rem;
    color:         rgba(202,255,111,0.7);
    background:    rgba(202,255,111,0.06);
    padding:       1px 5px;
    border-radius: 3px;
    word-break:    break-all;
}

/* ── Mobile tweaks ────────────────────────────────────────── */
@media (max-width: 599px) {
    .tl-page { padding-left: var(--sp-5); padding-right: var(--sp-5); }
    .tl-card { padding: var(--sp-6) var(--sp-5); }
    .tl-cta  { padding: var(--sp-8) var(--sp-6); }
    .tl-ratio { font-size: 2.5rem; }
}

/* ── Financial Tools Coming Soon ────────────────────────────── */
.tl-coming-soon {
    margin:     var(--sp-16) 0;
    padding:    var(--sp-12) 0;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.tl-coming-soon-header {
    margin-bottom: var(--sp-10);
}

.tl-coming-soon-h2 {
    font-family:    var(--font-display);
    font-size:      clamp(2rem, 5vw, 3rem);
    font-weight:    700;
    color:          #fff;
    letter-spacing: -0.03em;
    line-height:    1.05;
    margin-top:     var(--sp-5);
}

.tl-coming-soon-h2 em {
    font-style: italic;
    color:      var(--clr-green);
}

.tl-coming-soon-sub {
    font-family:  var(--font-body);
    font-size:    1rem;
    color:        rgba(255,255,255,0.38);
    line-height:  1.7;
    margin-top:   var(--sp-4);
    max-width:    520px;
}

.tl-coming-soon-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   var(--sp-4);
}

@media (max-width: 767px) {
    .tl-coming-soon-grid { grid-template-columns: 1fr; }
}

.tl-coming-soon-card {
    background:     rgba(255,255,255,0.03);
    border:         1px solid rgba(255,255,255,0.07);
    border-radius:  var(--r-xl);
    padding:        var(--sp-8);
    display:        flex;
    flex-direction: column;
    gap:            var(--sp-4);
}

.tl-coming-soon-icon {
    width:            44px;
    height:           44px;
    border-radius:    var(--r-md);
    background:       rgba(202,255,111,0.06);
    border:           1px solid rgba(202,255,111,0.12);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    color:            var(--clr-green);
    flex-shrink:      0;
}

.tl-coming-soon-icon svg { width: 22px; height: 22px; }

.tl-coming-soon-card h4 {
    font-family:    var(--font-display);
    font-size:      1rem;
    font-weight:    700;
    color:          #fff;
    letter-spacing: -0.01em;
    line-height:    1.3;
}

.tl-coming-soon-card p {
    font-family: var(--font-body);
    font-size:   0.875rem;
    color:       rgba(255,255,255,0.35);
    line-height: 1.7;
    flex:        1;
}

.tl-coming-soon-badge {
    display:        inline-block;
    font-family:    var(--font-display);
    font-size:      0.5625rem;
    font-weight:    700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color:          rgba(202,255,111,0.5);
    background:     rgba(202,255,111,0.06);
    border:         1px solid rgba(202,255,111,0.12);
    border-radius:  100px;
    padding:        3px 10px;
    width:          fit-content;
}