/* DailyCents V6 — restrained visual finish, guided by the app's native UI. */

/* Accessible navigation, refined without turning the header into a new design. */
.skip-link{position:fixed;z-index:100;top:-90px;left:20px;padding:11px 16px;border-radius:11px;background:#fff;border:2px solid #0a87f6;color:#06255d;font-weight:750;box-shadow:0 7px 20px #153a6d25}
.skip-link:focus{top:14px}
.site-header{box-shadow:0 5px 22px rgba(20,81,151,.035)}
.nav-links a:not(.nav-button){position:relative;transition:color .18s ease}
.nav-links a:not(.nav-button)::after{content:"";position:absolute;left:0;right:0;bottom:-11px;height:2px;background:#0788ff;border-radius:3px;transform:scaleX(0);transform-origin:center;transition:transform .18s ease}
.nav-links a:not(.nav-button):hover::after,.nav-links a[data-current="true"]::after{transform:scaleX(1)}
.nav-links a[data-current="true"]{color:#0672db}

/* Subtler native-inspired rhythm in headings and controls. */
.section-head .kicker::before,.platform-panel .kicker::before,.cta-card .kicker::before{content:"";width:7px;height:7px;flex:none;border-radius:2px;background:linear-gradient(135deg,#077af6,#20c5e0);box-shadow:0 0 0 3px #e0f2ff}
.hero-text .btn,.final-cta .btn{transition:transform .18s ease,background .18s ease,box-shadow .18s ease,border-color .18s ease}
.btn-outline:hover{border-color:#9dcfff;box-shadow:0 7px 19px rgba(10,92,179,.09)}

/* Four native colour cues offer useful context outside the illustrative app. */
.calendar-legend{display:flex;align-items:center;justify-content:center;gap:9px 17px;flex-wrap:wrap;margin:17px 0 0;padding:12px 16px;background:rgba(255,255,255,.82);border:1px solid #dbe8f8;border-radius:12px;box-shadow:0 3px 17px #123f6d09}
.legend-intro{font-size:11px;letter-spacing:.045em;font-weight:820;color:#305883;white-space:nowrap;margin-right:6px}
.legend-key{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;color:#526d8e;font-weight:675;font-size:11.5px}
.legend-mark{height:22px;min-width:22px;display:inline-grid;place-items:center;border-radius:6px;font-size:12px;font-style:normal;font-weight:840;line-height:1}
.legend-mark.income{color:#099a53;background:#e2f7eb;border:1px solid #bce9d0}
.legend-mark.expense{color:#e12b5e;background:#fff0f5;border:1px solid #f8cfdf}
.legend-mark.balance{color:#087df3;background:#e9f3ff;border:1px solid #cee4ff}
.legend-mark.warning{color:#dc8a00;background:#fff4df;border:1px solid #f9ddb0}
.demo-caption{margin-top:12px;line-height:1.6}

/* Product previews: nearly imperceptible edge and shadow tweaks for clarity. */
.v4-detail-preview,.product-window,.mini-app-window{outline:1px solid rgba(255,255,255,.7);outline-offset:-2px}
.v4-transaction-card{transition:border-color .16s ease,box-shadow .16s ease}
.v4-transaction-card:hover{border-color:#bdd9f4;box-shadow:0 3px 11px rgba(34,105,180,.065)}
.product-window .cal-day:not(.empty):hover{border-color:#8fc6f7;box-shadow:inset 0 0 0 1px #acd9ff30;background:color-mix(in srgb,var(--app-paper),#eaf5ff 7%)}
.product-window .cal-day.selected:hover{border-color:#048bff;box-shadow:inset 0 0 0 1px #048bff21}
.product-window .app-toolbar .tool-button{transition:border-color .16s ease,background .16s ease,box-shadow .16s ease}
.product-window .app-toolbar .tool-button:hover{border-color:#90caff;background:color-mix(in srgb,var(--app-paper),#eaf5ff 17%)}
.product-window[data-theme="dark"] .app-toolbar .tool-button:hover{border-color:#577eae;background:#293f59}
.preview-switch{box-shadow:0 2px 8px rgba(17,74,148,.035)}
.preview-switch button:hover:not(.active){background:#f3f8ff;color:#276ca9}

/* Feature cards echo the thin highlighted borders of the app's selected day. */
.feature-card{position:relative;overflow:hidden;border-color:#d8e6f5;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background .2s ease}
.feature-card::before{content:"";position:absolute;top:0;left:24px;right:24px;height:2px;opacity:0;background:linear-gradient(90deg,#0b87ff,#30ccdd);border-radius:0 0 3px 3px;transition:opacity .2s ease}
.feature-card:hover{transform:translateY(-2px);border-color:#bcdaf5;box-shadow:0 13px 32px rgba(17,88,161,.085);background:linear-gradient(180deg,#fafdff,#fff 62%)}
.feature-card:hover::before{opacity:1}
.feature-card .icon-tile{box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}

/* Onboarding steps keep their original scale with just a blue focal accent. */
.step{position:relative;overflow:hidden;box-shadow:0 4px 16px rgba(23,80,149,.027)}
.step::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#188cff,#22c4df);opacity:.62}
.step-num{border:1px solid #d0e6fe}

/* The availability panel stays light but gets a slightly more deliberate edge. */
.platform-panel{box-shadow:0 12px 36px rgba(21,79,145,.065)}
.platform-item{transition:border-color .18s ease,box-shadow .18s ease}
.platform-item:first-child{border-color:#bcdafa;box-shadow:0 5px 20px rgba(26,114,205,.075)}

/* FAQ rows feel closer to native expandable panels while remaining compact. */
.faq details{border:1px solid transparent;border-bottom-color:#dbe7f4;padding:0;margin:0;border-radius:10px;transition:background .17s ease,border-color .17s ease}
.faq details+details{margin-top:2px}
.faq summary{padding:18px 14px;align-items:center;line-height:1.45}
.faq details:hover{background:#f8fbff}
.faq details[open]{background:#f3f9ff;border-color:#d3e6fa;margin:7px 0}
.faq details[open] summary{color:#0873db}
.faq details[open] p{margin:0 38px 17px 14px}
.faq summary:after{height:25px;width:25px;flex:none;display:grid;place-items:center;border-radius:8px;background:#edf6ff;font-size:21px;font-weight:520}
.faq details[open] summary:after{background:#e0efff}

@media(max-width:900px){
 .calendar-legend{justify-content:flex-start;gap:10px 13px}
 .legend-intro{width:100%;margin-right:0}
}
@media(max-width:500px){
 .calendar-legend{margin-top:12px;padding:12px 13px;display:grid;grid-template-columns:1fr 1fr;gap:11px 8px}
 .calendar-legend .legend-intro{grid-column:1/-1}
 .legend-key{font-size:10.5px;white-space:normal}
 .legend-mark{height:21px;min-width:21px}
 .faq summary{padding:15px 10px;font-size:14px}
 .faq details[open] p{margin:0 12px 17px 10px}
 .feature-card:hover{transform:none}
}
@media(prefers-reduced-motion:reduce){
 .nav-links a:not(.nav-button),.nav-links a:not(.nav-button)::after,.hero-text .btn,.final-cta .btn,.v4-transaction-card,.product-window .app-toolbar .tool-button,.feature-card,.feature-card::before,.platform-item,.faq details{transition:none}
 .btn:hover,.feature-card:hover{transform:none}
}