/* ==========================================================================
   3ANGLE — Local Growth Partner Plan page (/local-growth)
   Page-only styles; everything else reuses theme.css tokens & components.
   ========================================================================== */

/* ---------- Intro feature: "why this model works" panel ------------------ */
.t-feature__visual--auto { aspect-ratio: auto; }

.t-lgp-points {
    width: 100%; align-self: stretch;
    display: flex; flex-direction: column; justify-content: center; gap: 16px;
    padding: clamp(22px, 3.5vw, 40px);
}
.t-lgp-point {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 16px 18px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .03);
    transition: border-color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);
}
.t-lgp-point:hover { border-color: rgba(255, 90, 31, .45); background: var(--surface-2); transform: translateY(-2px); }
.t-lgp-point i { color: var(--accent); font-size: 1.35rem; margin-top: .1rem; flex: 0 0 auto; }
.t-lgp-point strong { display: block; color: #fff; font-family: "Space Grotesk", sans-serif; margin-bottom: .15rem; }
.t-lgp-point span { color: var(--text-dim); font-size: .92rem; line-height: 1.5; }

/* ---------- "Built for Local Businesses" tiles ---------------------------- */
.t-lgp-types .t-platform { height: 100%; min-height: 118px; }
.t-lgp-types .t-platform i {
    font-size: 1.7rem; color: var(--accent-2); opacity: .8; line-height: 1;
    transition: opacity .35s var(--ease), transform .35s var(--ease), color .35s var(--ease);
}
.t-lgp-types .t-platform:hover i { opacity: 1; color: var(--accent); transform: scale(1.08); }
.t-lgp-types .t-platform span { text-align: center; }

/* ---------- Pricing cards -------------------------------------------------- */
.t-price__label {
    font-family: "Space Grotesk", sans-serif; font-weight: 600; text-transform: uppercase;
    letter-spacing: .14em; font-size: .74rem; color: var(--text-dim); margin: 0 0 .7rem;
}
.t-price__val {
    font-family: "Space Grotesk", sans-serif; font-weight: 700; letter-spacing: -.02em;
    font-size: clamp(1.55rem, 3vw, 2rem); color: #fff; line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.t-price__sub { color: var(--text-dim); font-size: .93rem; margin: .55rem 0 0 !important; }

.t-lgp-note {
    color: var(--text-faint); font-size: .86rem; line-height: 1.6;
    max-width: 820px; margin: 26px auto 0; text-align: center;
}
.t-lgp-note i { color: var(--accent-2); margin-right: .35rem; }

/* ---------- Calculator ----------------------------------------------------- */
.t-calc {
    position: relative; display: grid; grid-template-columns: 1.05fr .95fr;
    border: 1px solid rgba(255, 90, 31, .4); border-radius: var(--radius-lg); overflow: hidden;
    background: radial-gradient(640px 300px at 12% -10%, rgba(255, 90, 31, .14), transparent 70%), var(--surface);
    box-shadow: 0 0 0 1px rgba(255, 90, 31, .18), 0 24px 70px rgba(255, 90, 31, .12);
}
.t-calc__inputs { padding: clamp(26px, 4vw, 44px); display: grid; gap: 24px; align-content: start; }
.t-calc__results {
    padding: clamp(26px, 4vw, 44px);
    background: rgba(10, 10, 12, .55); border-left: 1px solid var(--border);
    display: flex; flex-direction: column;
}
.t-calc__rtitle { font-size: 1.15rem; color: var(--text-dim); font-weight: 500; letter-spacing: .02em; margin-bottom: 1rem; }

.t-calc__field label {
    display: block; font-size: .85rem; color: var(--text-dim); font-weight: 500; margin-bottom: .5rem;
}
.t-calc__labelrow { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.t-calc__labelrow output {
    font-family: "Space Grotesk", sans-serif; font-weight: 700; color: #fff; font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}
.t-calc__hint { color: var(--text-faint); font-size: .8rem; margin: .5rem 0 0; }

.t-calc input[type="range"] {
    width: 100%; height: 6px; margin: .6rem 0 .1rem;
    accent-color: var(--accent); cursor: pointer;
}
.t-calc__scale { display: flex; justify-content: space-between; color: var(--text-faint); font-size: .78rem; }

.t-calc__money { position: relative; }
.t-calc__cur {
    position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
    color: var(--text-faint); pointer-events: none;
}
.t-calc__money .t-input { padding-left: 1.95rem; }
.t-calc__money--pct .t-input { padding-left: 1rem; padding-right: 2.2rem; }
.t-calc__pctsign { left: auto; right: 15px; }

.t-calc__rows { margin: 0; }
.t-calc__row {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    padding: 13px 0; border-bottom: 1px dashed var(--border);
}
.t-calc__row dt { color: var(--text-dim); font-size: .95rem; font-weight: 400; }
.t-calc__row dd {
    margin: 0; font-family: "Space Grotesk", sans-serif; font-weight: 700; color: #fff;
    font-size: 1.15rem; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.t-calc__row--total { border-bottom: 0; padding-bottom: 4px; }
.t-calc__row--total dd { font-size: 1.7rem; color: var(--accent-2); }
.t-calc__row--muted dd { color: var(--text-dim); font-weight: 600; font-size: 1rem; }

.t-calc__msg {
    margin: 18px 0 0; padding: 13px 16px; border-radius: var(--radius-sm);
    font-size: .92rem; line-height: 1.5; border: 1px solid; display: flex; gap: .6rem; align-items: flex-start;
}
.t-calc__msg i { flex: 0 0 auto; margin-top: .1rem; }
.t-calc__msg--cap { background: var(--accent-soft); border-color: rgba(255, 90, 31, .4); color: var(--accent-2); }
.t-calc__msg--ok { background: rgba(56, 224, 123, .08); border-color: rgba(56, 224, 123, .35); color: #b7f5cf; }

.t-calc__note { color: var(--text-faint); font-size: .8rem; line-height: 1.55; margin: 14px 0 0; }

@media (max-width: 991px) {
    .t-calc { grid-template-columns: 1fr; }
    .t-calc__results { border-left: 0; border-top: 1px solid var(--border); }
}