/* marketing_nav.css — the "How it Works" dropdown in the marketing nav.

   "How it Works" now covers two pages — the grid mechanic (How to Use 10MB) and
   the habit loop built on top of it (How Habits Work) — so the single nav link
   became a group of two. The habits page previously had one entry point in the
   whole site: a section link partway down Landing.

   Loaded AFTER each page's own <style>, so `.navdrop-menu a` overrides the
   uppercase `.nav-links a` / `.snav-links a` treatment on source order alone.

   Below 960px `.nav-links`/`.snav-links` is display:none and the phone sheet
   takes over. marketing_nav.js clones the <a> children into that sheet, which is
   why the trigger is a <button>: it is skipped by the clone, and the two real
   destinations land in the sheet as flat sibling rows. No nested disclosure on a
   phone — the sheet is already the disclosure. */

.navdrop { position: relative; display: inline-flex; align-items: center; }
/* The panel has to hang off the nav pill, not off the 14px-tall text of its own
   trigger. Stretching the link row and the group to the pill's full height makes
   `top: 100%` mean "below the pill" — the links inside stay centred, so nothing
   moves visually. */
.nav-links, .snav-links { align-self: stretch; }
.navdrop { align-self: stretch; }
.navdrop-t { height: 100%; }
.navdrop-t { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; padding: 0; margin: 0; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--tmb-fg-3); transition: color .15s; }
.navdrop-t:hover, .navdrop-t.active { color: var(--tmb-fg-1); }
.navdrop[data-open="true"] .navdrop-t { color: var(--tmb-fg-1); }
.navdrop-t svg { width: 11px; height: 11px; flex-shrink: 0; transition: transform .2s var(--tmb-ease-out); }
.navdrop[data-open="true"] .navdrop-t svg { transform: rotate(180deg); }

.navdrop-menu { position: absolute; top: calc(100% + 18px); left: 50%; width: 288px; padding: 8px; display: flex; flex-direction: column; gap: 2px; background: rgba(255,255,255,.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--tmb-border); border-radius: 20px; box-shadow: var(--tmb-shadow-xl); opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(-6px); transition: opacity .18s var(--tmb-ease-out), transform .22s var(--tmb-ease-out), visibility .22s; }
/* Bridges the gap so travelling from trigger to panel never leaves both. */
.navdrop-menu::before { content: ""; position: absolute; top: -18px; left: 0; right: 0; height: 18px; }
.navdrop[data-open="true"] .navdrop-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.navdrop-menu a { display: block; padding: 11px 13px; border-radius: 14px; font-size: 14px; font-weight: 700; text-transform: none; letter-spacing: -.01em; line-height: 1.3; color: var(--tmb-fg-1); }
.navdrop-menu a:hover, .navdrop-menu a.active { background: var(--tmb-surface-soft); color: var(--tmb-fg-1); }
.navdrop-menu a s { display: block; margin-top: 3px; text-decoration: none; font-size: 12.5px; font-weight: 500; letter-spacing: 0; color: var(--tmb-fg-3); }

/* In the phone sheet the rows are 46px — the sublabels would double that. */
.mnav-sheet .navdrop-item s { display: none; }
/* The group's three destinations sit under a quiet heading, so the sheet keeps
   the shape the desktop dropdown has instead of flattening into seven peers. */
.mnav-sheet .mnav-group { display: block; padding: 10px 14px 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--tmb-fg-4); }
.mnav-sheet .mnav-sub { padding-left: 24px !important; position: relative; }
.mnav-sheet .mnav-sub::before { content: ""; position: absolute; left: 13px; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: var(--tmb-border); }
.mnav-sheet .mnav-sub.active::before { background: var(--tmb-brand-light-to); }

@media (prefers-reduced-motion: reduce) {
  .navdrop-menu, .navdrop-t svg { transition: none; }
}