/* Fill My Day: megamenu, content pages and footer links.
   Loads after styles.css and only uses its tokens (--blue, --yellow, --ink, --muted, --light, --line, --gutter). */

/* ---------- Header + megamenu ---------- */
.header{position:relative;z-index:40}
.site-nav>ul{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0}
.site-nav .nav-trigger,.site-nav .nav-link{display:inline-flex;align-items:center;gap:8px;padding:8px 0;border:0;background:none;color:white;font:inherit;font-size:14px;font-weight:500;cursor:pointer;white-space:nowrap}
.site-nav .nav-trigger::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.site-nav .nav-trigger[aria-expanded="true"]::after{transform:translateY(1px) rotate(-135deg)}
.site-nav .nav-trigger:hover,.site-nav .nav-trigger[aria-expanded="true"],.site-nav .nav-link:hover,.site-nav .nav-link[aria-current="page"]{color:var(--yellow)}
.site-nav .nav-trigger:focus-visible,.menu-toggle:focus-visible{outline:3px solid var(--yellow);outline-offset:4px}
.nav-mobile-only{display:none}

.mega{position:absolute;left:0;right:0;top:100%;z-index:40;background:white;color:var(--ink);border-bottom:1px solid var(--line);box-shadow:0 30px 50px -30px #00328a45}
.mega[hidden]{display:none}
.mega-inner{display:grid;grid-template-columns:1fr 2fr 1fr;gap:48px;padding:38px var(--gutter) 42px}
.mega-intro .eyebrow{margin-bottom:12px}
.mega-title{margin:0 0 12px;color:var(--ink);font-size:30px;font-weight:450;line-height:1.15;letter-spacing:-1.2px}
.mega-intro p:not(.eyebrow):not(.mega-title){max-width:30ch;margin:0 0 18px;color:var(--muted);font-size:15px;line-height:1.55}
.header nav .mega-hub{display:inline-flex;gap:14px;padding-bottom:6px;border-bottom:1px solid var(--ink);color:var(--ink);font-size:15px;font-weight:550}
.mega-links{display:grid;grid-template-columns:1fr 1fr;gap:4px 24px;align-content:start;list-style:none;margin:0;padding:0}
.header nav .mega-links a{display:block;padding:12px 14px;border-radius:8px;color:var(--ink)}
.header nav .mega-links a:hover,.header nav .mega-links a[aria-current="page"]{background:var(--light);color:var(--ink)}
.mega-links strong{display:block;color:var(--ink);font-size:16px;font-weight:550;letter-spacing:-.2px;line-height:1.35}
.mega-links span{display:block;margin-top:2px;color:var(--muted);font-size:14px;line-height:1.45}
.mega-feature{display:flex;flex-direction:column;gap:10px;align-self:start;padding:22px;border-radius:10px;background:var(--blue);color:white}
.feature-slots{display:grid;grid-template-columns:1fr 1.5fr .85fr;gap:5px;height:26px;margin-bottom:6px}
.feature-slots i{display:block;border-radius:4px;background:#ffffff30}
.feature-slots i:nth-child(2){background:var(--yellow)}
.mega-feature strong{font-size:20px;font-weight:500;letter-spacing:-.5px;line-height:1.2}
.mega-feature p{margin:0;color:#e3ecff;font-size:14px;line-height:1.5}
.header nav .mega-feature a{color:var(--yellow);font-size:15px;font-weight:550}
.header nav .mega-feature a:hover{color:white}
.menu-toggle{display:none}

/* ---------- Content page hero ---------- */
.page-hero{background:var(--blue);color:white;padding:26px var(--gutter) 64px}
.crumbs{margin-bottom:44px;color:#cfdcff;font-size:13px}
.crumbs ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.crumbs li+li::before{content:"/";margin-right:8px;opacity:.55}
.crumbs a:hover{color:var(--yellow)}
.crumbs [aria-current]{color:white}
.page-hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:64px;align-items:end}
.page-hero .eyebrow{margin-bottom:20px;color:#e3ecff}
.page-hero h1{max-width:15ch;margin:0;font-size:clamp(44px,5.2vw,78px);font-weight:450;line-height:1.05;letter-spacing:-3px}
.page-hero .lede{max-width:46ch;margin:24px 0 0;color:#e6eeff;font-size:18px;line-height:1.6}
.page-hero .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.page-hero .button.yellow{color:var(--blue)}
.page-hero .launch-note{margin-top:18px}
.button.ghost{border:1px solid #ffffff70;background:transparent;color:white}
.button.ghost:hover{border-color:white}
.in-short{padding:24px 26px 26px;border-radius:9px;background:white;color:var(--ink);box-shadow:0 15px 50px #00328a20}
.in-short .eyebrow{margin-bottom:12px;color:var(--blue);font-size:11px}
.in-short p:not(.eyebrow){margin:0;color:var(--ink);font-size:16px;line-height:1.65}

/* ---------- Day card (reuses the homepage time-slot styles) ---------- */
.day-card{margin:0 0 56px;padding:22px 24px 24px;border:1px solid var(--line);border-radius:9px;background:white;color:var(--blue)}
.day-card.is-filled .gap-after{transform:translateY(0)}
.day-card.is-filled .gap-before{opacity:0}
.day-card figcaption{margin-top:14px;color:var(--muted);font-size:14px}

/* ---------- Key points row (homepage step styles) ---------- */
.points-section{padding-bottom:24px}
.points-section .section-heading h2{max-width:14ch}
.steps.four{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ---------- Body + prose ---------- */
.page-body{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:88px;align-items:start}
.page-body.single{grid-template-columns:minmax(0,1fr)}
.prose{max-width:720px;color:#2b4677;font-size:18px;line-height:1.75}
.prose>h2{margin:72px 0 20px;color:var(--ink);font-size:clamp(30px,2.8vw,42px);font-weight:500;line-height:1.15;letter-spacing:-1.4px}
.prose>h2:first-child{margin-top:0}
.prose h3{margin:28px 0 8px;color:var(--ink);font-size:20px}
.prose p{margin:0 0 18px}
.prose strong{color:var(--ink);font-weight:550}
.prose a{color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.prose a:hover{text-decoration-thickness:2px}
.prose ul{margin:0 0 22px;padding:0;list-style:none}
.prose ul li{position:relative;margin:0 0 10px;padding-left:26px}
.prose ul li::before{content:"";position:absolute;left:0;top:.66em;width:13px;height:7px;border-radius:2px;background:var(--yellow)}
.page-steps{counter-reset:step;margin:24px 0 30px;padding:0;list-style:none;border-top:1px solid var(--line)}
.page-steps>li{counter-increment:step;display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:14px;padding:22px 0;border-bottom:1px solid var(--line)}
.page-steps>li::before{content:counter(step,decimal-leading-zero);grid-row:1/3;color:var(--blue);font-size:30px;line-height:1.1;letter-spacing:-1px}
.page-steps h3{margin:2px 0 6px;font-size:19px}
.page-steps p{margin:0;font-size:16px}
.callout{margin:24px 0;padding:16px 20px;border-left:4px solid var(--yellow);border-radius:0 8px 8px 0;background:#fffbe0;color:var(--ink)}
.callout p:last-child{margin-bottom:0}
.callout-urgent{border-left-color:#d6382f;background:#fff1f0}
.example{margin:30px 0;padding:24px 26px;border-radius:9px;background:var(--light);color:var(--ink)}
.example .eyebrow{margin-bottom:10px}
.example p:last-child{margin-bottom:0}
.table-scroll{margin:28px 0;overflow-x:auto}
.compare{width:100%;min-width:560px;border-collapse:collapse;font-size:16px;line-height:1.5}
.compare th,.compare td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.compare thead th{color:var(--blue);font-size:12px;font-weight:600;letter-spacing:1.3px}
.compare tbody th{color:var(--ink);font-weight:550;width:30%}
.compare td.is-us,.compare th.is-us{background:#fffbe0}
.job-card{max-width:420px;margin:30px 0;padding:18px 20px;border:1px solid var(--line);border-radius:12px;background:white;box-shadow:0 15px 40px #00328a14;color:var(--ink);font-size:15px;line-height:1.5}
.job-card .jc-top{display:flex;justify-content:space-between;gap:12px;margin-bottom:8px}
.job-card .jc-title{font-size:18px;font-weight:550}
.job-card .jc-dist{flex-shrink:0;padding:3px 10px;border-radius:99px;background:var(--yellow);color:var(--blue);font-size:13px;font-weight:550}
.job-card .jc-meta{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;color:var(--muted);font-size:14px}
.job-card .jc-label{margin:0 0 10px;color:var(--blue);font-size:11px;font-weight:600;letter-spacing:1.3px}
.toc{position:sticky;top:28px}
.toc .eyebrow{margin-bottom:12px}
.toc ol{margin:0;padding:0;list-style:none;border-left:1px solid var(--line)}
.toc a{display:block;margin-left:-1px;padding:7px 0 7px 16px;border-left:2px solid transparent;color:var(--muted);font-size:14px;line-height:1.4}
.toc a:hover{color:var(--ink)}
.toc a.is-active{border-left-color:var(--blue);color:var(--ink);font-weight:550}

/* ---------- FAQ on content pages (markup and styles shared with the homepage) ---------- */
.page-faq{border-top:1px solid var(--line)}
.faq details p a{color:var(--blue);text-decoration:underline}

/* ---------- Keep reading ---------- */
.keep-reading{background:var(--light)}
.keep-reading h2{margin:0}
.kr-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:36px 0 0;padding:0;list-style:none}
.kr-list a{display:flex;flex-direction:column;height:100%;min-height:180px;padding:24px;border-radius:9px;background:white;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.kr-list a:hover{transform:translateY(-3px);box-shadow:0 12px 30px #00328a18}
.kr-list strong{color:var(--ink);font-size:21px;font-weight:500;line-height:1.25;letter-spacing:-.5px}
.kr-desc{margin-top:8px;color:var(--muted);font-size:15px;line-height:1.5}
.kr-go{display:flex;justify-content:space-between;margin-top:auto;padding-top:14px;border-top:1px solid var(--line);color:var(--blue);font-size:14px;font-weight:550}

/* ---------- Index lists (guides hub) ---------- */
.section-tint{background:var(--light)}
h2.index-label{margin:0 0 20px;font-size:12px;font-weight:600;line-height:1.6;letter-spacing:1.3px;color:var(--blue)}
.index-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:0;padding:0;list-style:none}
.index-grid a{display:block;height:100%;padding:26px 28px;border-radius:9px;background:var(--light);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.section-tint .index-grid a{background:white}
.index-grid a:hover{transform:translateY(-3px)}
.index-grid strong{display:block;color:var(--ink);font-size:22px;font-weight:500;line-height:1.25;letter-spacing:-.6px}
.index-grid span{display:block;margin-top:8px;color:var(--muted);font-size:15px}

/* ---------- CTA (homepage launch block) ---------- */
.launch .actions{display:flex;flex-wrap:wrap;gap:12px}
.launch .button.dark{background:var(--blue);color:white}
.launch .button.outline{border:1px solid #0858ef60;color:var(--blue)}

/* ---------- Footer links ---------- */
.footer-links{padding:56px var(--gutter) 0;border-top:1px solid #0858ef30;background:var(--yellow);color:var(--blue)}
.footer-links-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.fl-title{margin:0 0 14px;font-size:12px;font-weight:600;letter-spacing:1.3px}
.footer-links ul{margin:0;padding:0;list-style:none}
.footer-links li{margin:0 0 9px}
.footer-links a{font-size:15px}
.footer-links a:hover{text-decoration:underline}
.footer-legal{margin:40px 0 0;padding:18px 0 0;border-top:1px solid #0858ef30;font-size:12px}

/* ---------- 404 ---------- */
.notfound h1{max-width:14ch}

/* ---------- Responsive ---------- */
@media(max-width:1100px){
 .steps.four{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
 .steps.four article:nth-child(3){border-left:0;padding-left:0}
 .site-nav>ul{gap:20px}
 .mega-inner{grid-template-columns:1fr 2fr}
 .mega-feature{display:none}
 .page-body{gap:56px}
}
@media(max-width:900px){
 .page-hero-grid,.page-body{grid-template-columns:minmax(0,1fr)}
 .page-hero-grid{gap:36px}
 .toc{display:none}
 .kr-list,.index-grid{grid-template-columns:minmax(0,1fr)}
 .kr-list a{min-height:0}
 .footer-links-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
 .header .menu-toggle{display:inline-flex;align-items:center;min-height:44px;margin-left:-6px;padding:10px 14px;border:1px solid #ffffff70;border-radius:7px;background:none;color:white;font:inherit;font-size:13px;font-weight:550;cursor:pointer}
 .header.menu-open .site-nav{display:block;position:absolute;left:0;right:0;top:100%;z-index:40;height:calc(100dvh - 72px);overflow-y:auto;padding:4px 20px 40px;background:white;color:var(--ink)}
 .header .site-nav>ul{flex-direction:column;align-items:stretch;gap:0}
 .header .site-nav>ul>li{border-bottom:1px solid var(--line)}
 .header .site-nav .nav-trigger,.header .site-nav .nav-link{width:100%;justify-content:space-between;padding:18px 0;color:var(--ink);font-size:19px}
 .header .site-nav .nav-trigger:hover,.header .site-nav .nav-trigger[aria-expanded="true"],.header .site-nav .nav-link:hover,.header .site-nav .nav-link[aria-current="page"]{color:var(--blue)}
 .nav-mobile-only{display:block;padding-top:24px;border-bottom:0!important}
 .nav-mobile-only .button{width:100%;justify-content:space-between}
 .mega{position:static;border:0;box-shadow:none}
 .mega-inner{grid-template-columns:minmax(0,1fr);gap:0;padding:0 0 14px}
 .mega-intro{padding:0 0 6px}
 .mega-intro .eyebrow,.mega-title,.mega-intro p:not(.eyebrow):not(.mega-title){display:none}
 .mega-links{grid-template-columns:minmax(0,1fr)}
 .header nav .mega-links a{padding:11px 10px}
 body.menu-lock{overflow:hidden}
 .page-hero{padding:18px 20px 44px}
 .crumbs{margin-bottom:28px;font-size:12px}
 .page-hero h1{font-size:clamp(38px,10vw,56px);letter-spacing:-1.8px;line-height:1.08}
 .page-hero .lede{font-size:16px}
 .in-short{padding:20px}
 .prose{font-size:17px}
 .prose>h2{margin-top:48px;font-size:30px;letter-spacing:-1px}
 .day-card{padding:16px 15px;margin-bottom:40px}
 .footer-links{padding:40px 20px 0}
}
@media(max-width:350px){
 .header .menu-toggle{padding:9px 10px;font-size:12px}
}