/* Features: Three Reasons Advisors Keep It.
 *
 * Plain CSS on purpose. public/assets/css/app.css is a FROZEN marketing
 * Tailwind build that nothing in this repo regenerates, so a new arbitrary
 * utility written into a site view renders as nothing at all, silently.
 * Served straight off disk; asset_v() busts the cache on filemtime.
 *
 * This section had already been cut once, from eight stacked boxes at 1492px
 * to three columns. It ran 801px after that, which is still most of a screen
 * for three statements. Same three statements, same nine supporting points,
 * same words; the height came out of the metrics.
 *
 * House rules this is built to:
 *   R15  every card has a resting edge and the edge CHANGES on hover.
 *   R25  medallions float left of their copy and carry a border.
 *   R36  one type scale, two radii (9-18), one elevation.
 */

.vp { position: relative; overflow: hidden; border-top: 1px solid rgba(255, 255, 255, .1); background: linear-gradient(180deg, #0b1220 0%, #0f1826 100%); padding: 38px 0; }
.vp-bg { position: absolute; inset: 0; pointer-events: none; }
.vp-orb { position: absolute; top: -96px; left: 33%; width: 288px; height: 288px; border-radius: 999px; background: rgb(var(--brand-600-rgb) / .18); filter: blur(120px); }
/* Width and gutter come from the Blade wrapper's `mx-auto {{ $maxWidth }} px-4`. */
.vp-wrap { position: relative; }

.vp-grid { margin-top: 20px; display: grid; gap: 12px; }
@media (min-width: 1024px) { .vp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.vp-card { position: relative; overflow: hidden; border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; background: rgba(255, 255, 255, .04); padding: 18px; transition: border-color .2s, background .2s; }
.vp-card:hover { border-color: rgb(var(--brand-400-rgb) / .5); background: rgba(255, 255, 255, .06); }
/* The lit edge along the top, the way the rest of this page marks a panel. */
.vp-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, var(--brand-400), var(--brand-600)); }

.vp-eyebrow { display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(255, 255, 255, .15); border-radius: 999px; background: rgba(255, 255, 255, .1); padding: 4px 11px; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #dbeafe; white-space: nowrap; }
.vp-eyebrow i { font-size: 9px; color: #93c5fd; }
.vp-t { margin: 12px 0 0; font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: #fff; }
.vp-l { margin: 7px 0 0; font-size: 12.5px; line-height: 1.55; color: #cbd5e1; }

.vp-pts { margin: 14px 0 0; padding: 14px 0 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .1); display: flex; flex-direction: column; gap: 11px; }
.vp-pt { display: flex; align-items: flex-start; gap: 10px; }
.vp-ic { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: 0 0 28px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 9px; background: rgb(var(--brand-400-rgb) / .12); color: #93c5fd; font-size: 11px; }
.vp-pt-b { min-width: 0; }
.vp-pt-t { margin: 0; font-size: 12.5px; font-weight: 700; line-height: 1.3; color: #fff; }
.vp-pt-d { margin: 2px 0 0; font-size: 11.5px; line-height: 1.5; color: #94a3b8; }


/* ---------------------------------------------------------------------------
 * Every Feature, On Every Plan.
 *
 * Sixteen bordered cards in a flat 4-up grid: sixteen borders, sixteen
 * paddings, and no answer to "what is this one FOR". The same sixteen are now
 * four groups of four inside ONE ruled shell, so the list reads as a single
 * specification rather than a scatter of tiles, and four across means no
 * part-filled last row at any breakpoint.
 *
 * The grouping is by label in the view and cannot silently drop a feature:
 * anything not named in a group is appended to the last one.
 *
 * R15  the shell is one surface; the rules between cells do the separating.
 * R25  every medallion floats left of its copy and carries a border.
 * R2   four groups of four, so no cell is ever half empty.
 * ------------------------------------------------------------------------ */

.ev { position: relative; overflow: hidden; border-top: 1px solid #e7e5e4; background: #f8fafc; padding: 38px 0; }
/* Width and gutter come from the Blade wrapper's `mx-auto {{ $maxWidth }} px-4`. */
.ev-wrap { position: relative; }

/* The 1px gap IS the rule: the shell's background shows through between the
   cells, which is one border instead of four. */
.ev-cols { margin-top: 20px; display: grid; gap: 1px; overflow: hidden; border: 1px solid #e2e8f0; border-radius: 18px; background: #e2e8f0; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
@media (min-width: 680px) { .ev-cols { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1150px) { .ev-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.ev-panel { display: flex; flex-direction: column; background: #fff; padding: 15px; }
.ev-gh { display: flex; align-items: center; gap: 9px; }
.ev-gi { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: 0 0 26px; border: 1px solid var(--brand-200); border-radius: 8px; background: var(--brand-50); color: var(--brand); font-size: 11px; }
.ev-gt { margin: 0; font-size: 11.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--brand); white-space: nowrap; }

.ev-list { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.ev-item { display: flex; align-items: flex-start; gap: 9px; border-top: 1px solid #f1f5f9; padding: 10px 0; }
.ev-item:first-child { border-top: 0; padding-top: 0; }
.ev-ic { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: 0 0 26px; border: 1px solid var(--brand-100); border-radius: 8px; background: #fff; color: var(--brand); font-size: 11px; }
.ev-b { min-width: 0; }
.ev-l { margin: 0; font-size: 12.5px; font-weight: 700; line-height: 1.3; color: #0b1220; }
.ev-d { margin: 2px 0 0; font-size: 11.5px; line-height: 1.45; color: #64748b; }


/* ---------------------------------------------------------------------------
 * Two-Way Inbox.
 *
 * It was WHITE between two sand bands, which is two near-identical light
 * grounds separated by a hairline rather than an alternation. It takes the
 * same dark gradient the value-prop band wears, so the page now reads
 * sand, dark, sand, dark, sand.
 *
 * Three floating cards became ONE ruled shell of three cells: the 1px gap is
 * the rule, so the band carries one border rather than three.
 *
 * R34  grounds alternate; this is the page's second dark band, matching the
 *      first exactly rather than inventing a third blue.
 * R25  every medallion floats left of its copy and carries a border.
 * ------------------------------------------------------------------------ */

.ib { position: relative; overflow: hidden; border-top: 1px solid rgba(255, 255, 255, .1); background: linear-gradient(180deg, #0b1220 0%, #0f1826 100%); padding: 36px 0; }
.ib-bg { position: absolute; inset: 0; pointer-events: none; }
.ib-orb { position: absolute; top: -96px; left: 0; width: 288px; height: 288px; border-radius: 999px; background: rgb(var(--brand-600-rgb) / .2); filter: blur(120px); }
/* Width and gutter come from the Blade wrapper's `mx-auto {{ $maxWidth }} px-4`. */
.ib-wrap { position: relative; }

.ib-grid { margin-top: 20px; display: grid; gap: 1px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; background: rgba(255, 255, 255, .1); }
@media (min-width: 1024px) { .ib-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.ib-card { display: flex; align-items: flex-start; gap: 12px; background: #0e1726; padding: 18px; transition: background .2s; }
.ib-card:hover { background: #142033; }
.ib-ic { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 38px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; background: rgb(var(--brand-400-rgb) / .14); color: #93c5fd; font-size: 14px; }
.ib-b { min-width: 0; }
.ib-t { margin: 0; font-size: 14.5px; font-weight: 700; line-height: 1.3; color: #fff; }
.ib-d { margin: 5px 0 0; font-size: 12.5px; line-height: 1.55; color: #94a3b8; }


/* ---------------------------------------------------------------------------
 * Sorted Before You Read It.
 *
 * Four reply types, four meanings, four colors: red cancels, amber is late,
 * blue asks, emerald confirms. Four across rather than two by two, with the
 * color as a rule along the top of each column.
 *
 * The colors live HERE, keyed on data-tone, rather than as Tailwind classes
 * inside the $inboxSorts array. public/assets/css/app.css is a frozen build,
 * so a palette that lives in the data is a palette the build gets to veto.
 * The tone is read off the existing chip string in the view, so the mapping
 * cannot drift from the data it describes.
 *
 * R15  every card has a resting edge and the edge CHANGES on hover, in its
 *      own color rather than a shared one.
 * R25  the medallion floats left of its copy and carries a border.
 * ------------------------------------------------------------------------ */

.so { position: relative; overflow: hidden; border-top: 1px solid #e7e5e4; background: #f8fafc; padding: 36px 0; }
/* Width and gutter come from the Blade wrapper's `mx-auto {{ $maxWidth }} px-4`. */
.so-wrap { position: relative; }

.so-grid { margin-top: 18px; display: grid; gap: 10px; align-items: stretch; }
@media (min-width: 640px) { .so-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .so-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.so-row { position: relative; overflow: hidden; display: flex; flex-direction: column; border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; padding: 15px 14px 13px; transition: border-color .2s, box-shadow .2s; }
.so-row:hover { box-shadow: 0 12px 28px -24px rgba(15, 23, 42, .45); }
.so-row::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; }

.so-ic { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 34px; border: 1px solid; border-radius: 11px; background: #fff; font-size: 13px; }
.so-b { min-width: 0; margin-top: 11px; }
.so-head { display: flex; flex-direction: column; gap: 3px; }
.so-t { margin: 0; font-size: 13.5px; font-weight: 700; color: #0b1220; }
.so-w { margin: 0; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.so-d { margin: 7px 0 0; font-size: 12px; line-height: 1.5; color: #64748b; }

.so-row[data-tone="red"]::before     { background: #dc2626; }
.so-row[data-tone="amber"]::before   { background: #d97706; }
.so-row[data-tone="blue"]::before    { background: #2563eb; }
.so-row[data-tone="emerald"]::before { background: #059669; }
.so-row[data-tone="red"]     .so-ic { border-color: #fecaca; color: #dc2626; }
.so-row[data-tone="amber"]   .so-ic { border-color: #fde68a; color: #d97706; }
.so-row[data-tone="blue"]    .so-ic { border-color: #bfdbfe; color: #2563eb; }
.so-row[data-tone="emerald"] .so-ic { border-color: #a7f3d0; color: #059669; }
.so-row[data-tone="red"]     .so-w { color: #b91c1c; }
.so-row[data-tone="amber"]   .so-w { color: #b45309; }
.so-row[data-tone="blue"]    .so-w { color: #1d4ed8; }
.so-row[data-tone="emerald"] .so-w { color: #047857; }
.so-row[data-tone="red"]:hover     { border-color: #fca5a5; }
.so-row[data-tone="amber"]:hover   { border-color: #fcd34d; }
.so-row[data-tone="blue"]:hover    { border-color: #93c5fd; }
.so-row[data-tone="emerald"]:hover { border-color: #6ee7b7; }