/* Interactive controls */
.menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    padding: 9px;
    border: 3px solid var(--ink);
    border-radius: 13px;
    background: var(--yellow);
    box-shadow: 0 4px 0 var(--ink);
    cursor: pointer;
}
.menu-toggle span { display: block; width: 100%; height: 3px; margin: 4px 0; border-radius: 3px; background: var(--ink); transition: transform .2s ease, opacity .2s ease; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.navbar.is-scrolled { box-shadow: 0 8px 0 var(--ink); }

.study-card-toggle .toggle-track { border: 0; padding: 0; }
.study-card-toggle .toggle-track:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.study-focus-visual.mode-off .floating-app-badge { opacity: .4; filter: grayscale(.65); }
.study-focus-visual.mode-off .study-circle-bg { background: #DCD6E8; }

.features-blob-wrap { min-height: 620px; }
.feat-left { width: 330px; }
.feat-bottom { width: 390px; bottom: -10px; }
.feat-card-heading, .limit-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 13px; margin-bottom: 4px; border-bottom: 2px dashed #DDD6E8; text-align: left; }
.feat-card-heading > div, .limit-card-heading > div { display: flex; flex-direction: column; }
.feat-card-heading strong, .limit-card-heading strong { color: var(--purple); font: 650 1rem 'Fredoka', sans-serif; }
.feat-card-heading span, .limit-card-heading span { color: var(--text-muted); font-size: .72rem; }
.feat-live-dot { width: 11px; height: 11px; flex: 0 0 11px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 0 rgba(101,200,61,.5); animation: livePulse 2s infinite; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(101,200,61,.55); } 70% { box-shadow: 0 0 0 8px rgba(101,200,61,0); } 100% { box-shadow: 0 0 0 0 rgba(101,200,61,0); } }

.feat-app-row { position: relative; border-radius: 14px; cursor: pointer; transition: background .25s ease, transform .25s ease, padding .25s ease; }
.feat-app-row:hover, .feat-app-row:focus-visible { padding-left: 7px; padding-right: 7px; background: #F5F1FF; transform: translateX(3px); outline: none; }
.feat-app-row.is-allowed { background: #EDFFE5; }
.feat-app-row.limit-locked { background: #FFF0F5; cursor: not-allowed; }
.feat-app-row.limit-locked .feat-app-icon { filter: grayscale(.55); opacity: .72; }
.feat-left:has(.limit-locked) { animation: appsLocked .6s ease; border-color: var(--warning); }
.feat-left:has(.limit-locked) .feat-live-dot { background: var(--warning); animation: none; box-shadow: 0 0 0 5px rgba(240,79,120,.16); }
@keyframes appsLocked { 0%,100% { transform: translateY(-50%); } 30% { transform: translateY(-50%) scale(1.025); } 60% { transform: translateY(-50%) scale(.99); } }
.feat-app-row svg { transition: transform .3s cubic-bezier(.2,.9,.3,1.4), stroke .25s ease; }
.feat-app-row.just-allowed { animation: accessAllowed .55s ease; }
.feat-app-row.just-blocked { animation: accessBlocked .48s ease; }
.feat-app-row.just-allowed svg, .feat-app-row.just-blocked svg { animation: lockPop .5s cubic-bezier(.2,.9,.3,1.5); }
@keyframes accessAllowed { 0%,100% { transform: translateX(0); } 45% { transform: translateX(7px) scale(1.015); background: #D9FFC7; } }
@keyframes accessBlocked { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); background: #FFE0E8; } 75% { transform: translateX(-3px); } }
@keyframes lockPop { 0% { transform: scale(.55) rotate(-18deg); } 65% { transform: scale(1.3) rotate(8deg); } 100% { transform: scale(1) rotate(0); } }

.limit-card-heading { margin-bottom: 12px; }
.limit-status { padding: 4px 9px; color: var(--primary-dark) !important; background: #E8FFDC; border: 2px solid var(--ink); border-radius: 999px; font-weight: 800; }
.limit-status.reached { color: #A5264D !important; background: #FFE5EE; }
.feat-progress-time { margin-bottom: 8px; font-size: .88rem; text-align: left; }
.feat-progress-time strong { font-size: 1.05rem; }
.feat-progress-fill { transition: width .55s cubic-bezier(.2,.8,.2,1), background .3s ease; }
.feat-progress-fill.limit-reached { background: linear-gradient(90deg, var(--pink), var(--warning)); }
.feat-progress-bar.is-updating { animation: progressBounce .45s ease; }
@keyframes progressBounce { 50% { transform: scaleY(1.55); } }
.limit-controls { display: grid; grid-template-columns: 34px 1fr 34px; align-items: center; gap: 10px; margin: 11px 0 8px; }
.limit-step { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 2px solid var(--ink); border-radius: 50%; background: var(--yellow); color: var(--ink); box-shadow: 0 3px 0 var(--ink); font: 700 1.25rem 'Fredoka', sans-serif; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.limit-step:hover { background: var(--pink); transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.limit-step:active { transform: translateY(3px); box-shadow: none; }
.limit-step:disabled { opacity: .4; cursor: not-allowed; }
.limit-slider { width: 100%; height: 8px; appearance: none; border: 2px solid var(--ink); border-radius: 999px; background: linear-gradient(90deg, var(--purple) var(--limit-fill, 43%), #E7E1EF var(--limit-fill, 43%)); cursor: grab; }
.limit-slider:active { cursor: grabbing; }
.limit-slider::-webkit-slider-thumb { width: 22px; height: 22px; appearance: none; border: 3px solid var(--ink); border-radius: 50%; background: #FFFFFF; box-shadow: 0 2px 0 var(--ink); }
.limit-slider::-moz-range-thumb { width: 18px; height: 18px; border: 3px solid var(--ink); border-radius: 50%; background: #FFFFFF; box-shadow: 0 2px 0 var(--ink); }
.limit-slider:focus-visible { outline: 3px solid var(--pink); outline-offset: 5px; }
.feat-bottom.all-apps-locked { border-color: var(--warning); box-shadow: 0 8px 0 var(--warning); animation: limitLock .55s ease; }
@keyframes limitLock { 0%,100% { transform: translateX(-50%); } 35% { transform: translateX(-50%) scale(1.035); } 70% { transform: translateX(-50%) scale(.985); } }
.feat-progress-label { min-height: 20px; transition: color .2s ease, transform .2s ease; }
.feat-progress-label.is-updating { color: var(--purple); transform: scale(1.04); }

.chart-mockup .bar { cursor: pointer; }
.chart-mockup .bar:hover { filter: brightness(1.08); transform: scaleY(1.04); transform-origin: bottom; }

/* FAQ accordion */
.faq-section { background: #F0ECFF; border-top: 5px solid var(--ink); border-bottom: 5px solid var(--ink); }
.faq-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 90px; align-items: start; }
.faq-intro { position: sticky; top: 120px; }
.faq-kicker { display: inline-flex; padding: 7px 14px; margin-bottom: 20px; background: var(--pink); border: 3px solid var(--ink); border-radius: 999px; box-shadow: 0 4px 0 var(--ink); font-family: 'Fredoka', sans-serif; font-weight: 650; transform: rotate(-2deg); }
.faq-intro h2 { color: var(--purple); font-size: clamp(2.7rem, 4.2vw, 3.8rem); }
.faq-intro p { margin: 18px 0 28px; font-size: 1.05rem; }
.faq-list { display: grid; gap: 18px; }
.faq-item { background: #FFFFFF; border: 3px solid var(--ink); border-radius: 20px; box-shadow: 0 6px 0 var(--ink); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.faq-item[open] { background: #FFF9D9; transform: translateY(-2px); box-shadow: 0 8px 0 var(--ink); }
.faq-item summary { min-height: 76px; padding: 20px 22px; display: flex; align-items: center; justify-content: space-between; gap: 18px; color: var(--ink); font: 650 1.08rem 'Fredoka', sans-serif; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary span { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; background: var(--yellow); border: 2px solid var(--ink); border-radius: 50%; font-size: 1.35rem; transition: transform .22s ease; }
.faq-item[open] summary span { transform: rotate(45deg); background: var(--pink); }
.faq-item p { padding: 0 22px 24px; max-width: 650px; color: #554D65; }

.back-to-top { position: fixed; right: 24px; bottom: 24px; z-index: 900; width: 52px; height: 52px; display: grid; place-items: center; border: 3px solid var(--ink); border-radius: 50%; background: var(--yellow); color: var(--ink); box-shadow: 0 5px 0 var(--ink); font: 700 1.35rem 'Fredoka', sans-serif; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .2s ease, visibility .2s ease, transform .2s ease, box-shadow .2s ease; }
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }

@media (max-width: 900px) {
    .features-blob-wrap { min-height: auto; }
    .feat-left, .feat-bottom { width: min(100%, 430px); }
    .feat-left:has(.limit-locked), .feat-bottom.all-apps-locked { animation: none; }
    .faq-layout { grid-template-columns: 1fr; gap: 48px; }
    .faq-intro { position: static; max-width: 680px; }
}

@media (max-width: 767px) {
    .menu-toggle { display: block; order: 2; }
    .nav-container > .logo { order: 1; }
    .nav-container > .nav-actions { order: 3; }
    .nav-links.is-open { position: absolute; top: 75px; left: 0; right: 0; z-index: 20; padding: 18px; display: flex; flex-direction: column; gap: 6px; background: #FFFFFF; border: 3px solid var(--ink); border-radius: 18px; box-shadow: 0 7px 0 var(--ink); }
    .nav-links.is-open a { padding: 11px 13px; border-radius: 10px; }
    .nav-links.is-open a:hover { background: #F0ECFF; }
    .faq-item summary { min-height: 70px; padding: 18px; font-size: 1rem; }
    .faq-item p { padding: 0 18px 20px; }
    .back-to-top { right: 16px; bottom: 16px; width: 48px; height: 48px; }
}