:root{
  --ink:#1e1b16; --ink-dim:#6f665b; --paper:#faf7f1; --card:#ffffff; --line:#e8e1d3;
  --navy:#1e1b16;
  --turquoise:#0d5c59; --turquoise-dim:#e3efeb;
  --chile:#b0451a; --chile-dim:#f7e6dc;
  --gold:#c08a2e;
  --radius:10px;
  --ease:cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box;}
html,body{margin:0;}
body{font-family:'Inter',system-ui,sans-serif; background:var(--paper); color:var(--ink); line-height:1.55; -webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:'Fraunces',serif; font-weight:600; margin:0;}
a{color:var(--turquoise);}
::selection{background:var(--turquoise-dim); color:var(--navy);}
@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms !important; transition-duration:.01ms !important;}}

/* =============== CATEGORY COLOR TOKENS =============== */
.c-Housing{--accent:#b0451a;--accent-dim:#f7e6dc;}
.c-Food{--accent:#4f7942;--accent-dim:#e6ede1;}
.c-FinancialBanking{--accent:#1d7a70;--accent-dim:#e2f0ee;}
.c-Healthcare{--accent:#a13a3a;--accent-dim:#f5e2e0;}
.c-EmploymentWorkforce{--accent:#8c5a22;--accent-dim:#eee4d4;}
.c-EducationAcademicSupport{--accent:#2b5d82;--accent-dim:#dee8ef;}
.c-LegalCivic{--accent:#1b2a44;--accent-dim:#dde2ea;}
.c-IdentityCultural{--accent:#c08a2e;--accent-dim:#f3e7cf;}
.c-SeniorDisability{--accent:#3f6b5c;--accent-dim:#e0e9e4;}
.c-FamilyChildcare{--accent:#b06b3a;--accent-dim:#f2e2d3;}
.c-Utilities{--accent:#a67c1f;--accent-dim:#f0e4c9;}
.c-Veterans{--accent:#38517a;--accent-dim:#dfe4ef;}
.c-GeneralHubDirectory{--accent:#6e6456;--accent-dim:#e9e5db;}
.c-ImmigrantITINResources{--accent:#48548c;--accent-dim:#e2e4f0;}

/* =============== TOPO TEXTURE (used sparingly) =============== */
.topo{position:absolute; inset:0; opacity:0.07; pointer-events:none;}

/* =============== TOP UTILITY STRIP =============== */
.utility-strip{background:var(--paper); color:var(--ink-dim); font-size:0.74rem; font-family:'Inter',sans-serif; border-bottom:1px solid var(--line);}
.utility-strip .inner{max-width:1160px; margin:0 auto; padding:7px 24px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.utility-strip b{color:var(--ink);}

/* =============== HERO =============== */
.hero{position:relative; background:var(--paper); border-bottom:1px solid var(--line); overflow:hidden;}
.hero-inner{position:relative; z-index:2; max-width:1160px; margin:0 auto; padding:56px 24px 0;}
.hero-top{display:flex; justify-content:space-between; align-items:flex-start; gap:40px; flex-wrap:wrap;}
.hero-copy{max-width:600px;}
.eyebrow{font-family:'Inter',sans-serif; font-size:0.76rem; font-weight:600; letter-spacing:1.4px; text-transform:uppercase; color:var(--turquoise); margin-bottom:16px;}
.hero h1{font-size:2.7rem; font-weight:600; color:var(--ink); line-height:1.14; letter-spacing:-0.5px; margin-bottom:16px;}
.hero h1 em{font-style:italic; font-weight:500; color:var(--turquoise);}
.hero p{font-size:1.02rem; color:var(--ink-dim); max-width:500px; line-height:1.65; margin-bottom:0;}
.hero-figure{text-align:right; flex-shrink:0;}
.hero-figure .big-num{font-family:'Fraunces',serif; font-size:5.2rem; font-weight:700; color:var(--ink); line-height:0.9; letter-spacing:-2px;}
.hero-figure .big-num-label{font-family:'Inter',sans-serif; font-size:0.78rem; color:var(--ink-dim); letter-spacing:0.4px; text-transform:uppercase; margin-top:6px;}

.hero-search{max-width:1160px; margin:36px auto 0; padding:0 24px;}
.search-card{
  background:var(--card); border-radius:var(--radius); padding:6px; display:flex; gap:6px; flex-wrap:wrap;
  border:1px solid var(--line); box-shadow:0 16px 40px -24px rgba(30,27,22,.22); position:relative; z-index:3;
}
.search-wrap{position:relative; flex:1; min-width:220px;}
.search-wrap svg{position:absolute; left:16px; top:50%; transform:translateY(-50%); opacity:0.4;}
#search{
  width:100%; border:none; padding:14px 16px 14px 44px; font-family:'Inter',sans-serif; font-size:0.96rem;
  background:transparent; color:var(--ink);
}
#search:focus{outline:none;}
.toggle{
  display:flex; align-items:center; gap:7px; padding:12px 18px; border:none; border-radius:calc(var(--radius) - 2px);
  background:var(--paper); font-family:'Inter',sans-serif; font-size:0.82rem; font-weight:600; color:var(--ink-dim);
  cursor:pointer; transition:all .15s var(--ease); white-space:nowrap;
}
.toggle:hover{color:var(--ink);}
.toggle.active{background:var(--navy); color:#fff;}
.toggle.active.chile-tone{background:var(--chile); color:#fff;}
.hero-bottom-pad{height:44px;}

.breadcrumb{max-width:1160px; margin:0 auto; padding:20px 24px 0; font-family:'Inter',sans-serif; font-size:0.8rem; color:var(--ink-dim); font-weight:500;}
.breadcrumb span{cursor:pointer; color:var(--turquoise);}
.breadcrumb span:hover{text-decoration:underline;}

.content{max-width:1160px; margin:0 auto; padding:26px 24px 0;}

/* =============== SECTION HEADERS =============== */
.section-head{display:flex; align-items:baseline; justify-content:space-between; margin:6px 0 22px; flex-wrap:wrap; gap:8px;}
.section-head h2{font-size:1.5rem; font-weight:600; color:var(--ink);}
.section-head .sub{font-family:'Inter',sans-serif; font-size:0.84rem; color:var(--ink-dim);}

/* =============== ASSISTANT (keyword matcher) =============== */
.assistant-block{margin-top:30px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px;}
.assistant-block textarea{
  width:100%; border:1.5px solid var(--line); border-radius:8px; padding:12px 14px; font-family:'Inter',sans-serif;
  font-size:0.92rem; resize:vertical; color:var(--ink);
}
.assistant-block textarea:focus{outline:none; border-color:var(--turquoise);}
#assistantResults{margin-top:16px;}

/* =============== PRINT STYLESHEET =============== */
@media print{
  .utility-strip, .hero, .hero-search, .breadcrumb, .how-ribbon, .two-col, .video-row,
  .quick-start, .assistant-block, .cat-grid, .site-footer, .back-btn, .share-btn { display:none !important; }
  body{ background:#fff; color:#000; }
  .detail-card{ box-shadow:none; border:1px solid #999; }
  .content{ padding:0; max-width:100%; }
  a{ color:#000; text-decoration:underline; }
}

/* =============== QUICK START =============== */
.qs-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px;}
.qs-btn{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px;
  cursor:pointer; display:flex; align-items:center; gap:12px; transition:all .15s var(--ease); position:relative;
}
.qs-btn::before{content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent); opacity:0; transition:opacity .15s var(--ease);}
.qs-btn:hover{background:var(--accent-dim); transform:translateY(-2px); box-shadow:0 8px 18px -12px rgba(22,35,58,0.25);}
.qs-btn:hover::before{opacity:1;}
.qs-btn .icon-circle{width:40px; height:40px; border-radius:50%; background:var(--accent-dim); color:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.qs-btn span{font-size:0.92rem; font-weight:600; color:var(--ink); line-height:1.35;}

/* =============== CATEGORY GRID (clean, icon-led) =============== */
.cat-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
.cat-tile{
  background:var(--card); padding:22px 20px; cursor:pointer; display:flex; align-items:center; gap:14px;
  transition:background .15s var(--ease); position:relative;
}
.cat-tile::before{content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent); opacity:0; transition:opacity .15s var(--ease);}
.cat-tile:hover{background:var(--accent-dim);}
.cat-tile:hover::before{opacity:1;}
.cat-tile .icon-circle{
  width:46px; height:46px; border-radius:50%; background:var(--accent-dim); color:var(--accent);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.cat-tile .txt h3{font-size:0.98rem; font-weight:600; color:var(--ink); margin-bottom:2px;}
.cat-tile .txt .count{font-family:'Inter',sans-serif; font-size:0.78rem; color:var(--ink-dim);}

/* =============== CATEGORY BANNER (illustrated, once per category page) =============== */
.cat-banner{
  border-radius:var(--radius); overflow:hidden; margin-bottom:24px; position:relative; height:120px;
  background:linear-gradient(120deg, var(--accent) 0%, var(--accent) 40%, var(--accent-dim) 100%);
}
.cat-banner::before{
  content:''; position:absolute; inset:0; opacity:0.16;
  background-image:repeating-linear-gradient(135deg, transparent, transparent 16px, rgba(255,255,255,0.5) 16px, rgba(255,255,255,0.5) 32px);
}
.cat-banner-inner{position:relative; z-index:2; height:100%; display:flex; align-items:center; padding:0 28px;}
.icon-circle-lg{
  width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,0.92); color:var(--accent);
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px -8px rgba(0,0,0,0.3);
}

/* =============== LIST HEADER =============== */
.list-header{display:flex; align-items:center; gap:14px; margin-bottom:22px;}
.list-header .icon-circle{width:48px; height:48px; border-radius:50%; background:var(--accent-dim); color:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0;}

.card-list{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--card);}
.rcard{
  padding:16px 20px; cursor:pointer; border-bottom:1px solid var(--line); display:flex; gap:14px; align-items:flex-start;
  transition:background .12s var(--ease); position:relative;
}
.rcard:last-child{border-bottom:none;}
.rcard::before{content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent); opacity:0; transition:opacity .12s var(--ease);}
.rcard:hover{background:var(--paper);}
.rcard:hover::before{opacity:1;}
.rcard .body{flex:1; min-width:0;}
.rcard .rname{font-family:'Fraunces',serif; font-weight:600; font-size:1.04rem; color:var(--ink); display:block; cursor:pointer;}
.rcard .rname:hover{text-decoration:underline;}
.rcard .rname:focus-visible{outline:2px solid var(--chile); outline-offset:2px; border-radius:4px;}
.rcard .rorg{font-size:0.84rem; color:var(--ink-dim); display:block; margin-top:2px;}
.rcard .rmeta{display:flex; gap:6px; flex-wrap:wrap; margin-top:9px;}

.badge{
  display:inline-flex; align-items:center; gap:4px; font-family:'Inter',sans-serif; font-size:0.7rem;
  padding:3px 9px; border-radius:3px; font-weight:600; letter-spacing:0.2px;
}
.badge.geo{background:var(--turquoise-dim); color:var(--turquoise);}
.badge.hidden{background:#f3e7cf; color:var(--gold);}
.badge.verify{background:var(--chile-dim); color:var(--chile);}
.badge.imm{background:#e2e4f0; color:#48548c;}
.badge.curated{background:var(--turquoise); color:#fff;}

.empty{color:var(--ink-dim); font-style:italic; padding:40px 20px; text-align:center;}

/* =============== DETAIL PAGE =============== */
.detail-view{max-width:760px;}
.back-row{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; flex-wrap:wrap; gap:10px;}
.back-btn{
  display:inline-flex; align-items:center; gap:6px; background:none; border:none; color:var(--ink-dim);
  padding:8px 0; font-family:'Inter',sans-serif; font-size:0.85rem; font-weight:600; cursor:pointer; transition:color .12s;
}
.back-btn:hover{color:var(--ink);}
.share-btn{
  display:inline-flex; align-items:center; gap:6px; background:var(--card); border:1px solid var(--line);
  color:var(--ink-dim); padding:8px 14px; border-radius:20px; font-family:'Inter',sans-serif; font-size:0.8rem;
  font-weight:600; cursor:pointer; transition:all .12s;
}
.share-btn:hover{border-color:var(--turquoise); color:var(--turquoise);}
.detail-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
.detail-card .accent-bar{height:5px; background:var(--accent);}
.detail-card .inner{padding:32px;}
.badges-row{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px;}
.detail-card h2{font-size:1.7rem; font-weight:700; color:var(--navy); margin-bottom:24px; line-height:1.28;}
.field{margin:0 0 20px; line-height:1.65; font-size:0.95rem; padding-bottom:20px; border-bottom:1px solid var(--line);}
.field:last-child{margin-bottom:0; border-bottom:none; padding-bottom:0;}
.field b{
  display:block; font-family:'Inter',sans-serif; font-size:0.72rem; text-transform:uppercase;
  letter-spacing:0.6px; color:var(--accent); margin-bottom:6px; font-weight:700;
}
.elig-checklist{list-style:none; padding:0; margin:4px 0 0; display:flex; flex-direction:column; gap:8px;}
.elig-checklist li{display:flex; gap:9px; align-items:flex-start; line-height:1.5;}
.elig-checklist .chk{color:var(--accent); font-size:1.05rem; line-height:1.3; flex-shrink:0;}
.related-block{margin-top:36px;}
.related-block .section-head h2{font-size:1.15rem;}

/* =============== HOW IT WORKS ─ compact ribbon =============== */
.how-ribbon{
  display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; background:var(--card); margin-top:44px;
}
.how-cell{padding:20px; border-right:1px solid var(--line);}
.how-cell:last-child{border-right:none;}
.how-cell .num{font-family:'Fraunces',serif; font-style:italic; font-size:1.2rem; color:var(--turquoise); margin-bottom:6px;}
.how-cell h3{font-size:0.88rem; font-weight:600; color:var(--ink); margin-bottom:5px;}
.how-cell p{font-size:0.8rem; color:var(--ink-dim); margin:0; line-height:1.5;}

/* =============== MAP VIEW =============== */
.map-disclaimer{
  background:var(--chile-dim); border:1px solid #e0b89a; border-radius:var(--radius); padding:14px 18px;
  font-size:0.84rem; color:#7a3410; margin-bottom:18px; display:flex; gap:10px; align-items:flex-start;
}
.map-disclaimer b{display:block; margin-bottom:2px;}
#leafletMap{height:520px; border-radius:var(--radius); border:1px solid var(--line); overflow:hidden;}
.leaflet-popup-content{font-family:'Inter',sans-serif; font-size:0.85rem;}
.leaflet-popup-content b{font-family:'Fraunces',serif; font-size:0.98rem; display:block; margin-bottom:4px; color:var(--navy);}
.leaflet-popup-content a{color:var(--turquoise); font-weight:600; font-size:0.8rem;}

/* =============== FAQ + ABOUT (combined, tighter) =============== */
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:56px; align-items:start;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{padding:15px 0; cursor:pointer; font-weight:600; font-size:0.92rem; color:var(--ink); display:flex; justify-content:space-between; align-items:center;}
.faq-q .plus{font-family:'Fraunces',serif; color:var(--turquoise); transition:transform .15s var(--ease); font-size:1.1rem;}
.faq-item.open .plus{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .2s var(--ease);}
.faq-item.open .faq-a{max-height:200px; padding-bottom:16px;}
.faq-a p{margin:0; font-size:0.85rem; color:var(--ink-dim); line-height:1.6;}
.about-block p{font-size:0.9rem; color:var(--ink-dim); line-height:1.7; margin:0 0 14px;}
.method-list{list-style:none; padding:0; margin:16px 0 0; display:flex; flex-direction:column; gap:10px;}
.method-list li{display:flex; gap:9px; font-size:0.84rem; color:var(--ink-dim); line-height:1.5;}
.method-list li .check{color:var(--turquoise); font-weight:700; flex-shrink:0;}

/* =============== VIDEO ROW ─ compact =============== */
.video-row{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:56px;}
.video-row-tight{margin-top:30px;}
.video-card{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--card);}
.frame-wrap{position:relative; padding-bottom:56.25%; height:0; background:var(--navy);}
.video-card iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.video-card .cap{padding:12px 16px;}
.video-card .cap h3{font-size:0.86rem; margin-bottom:2px; color:var(--navy);}
.video-card .cap p{font-size:0.76rem; color:var(--ink-dim); margin:0;}

/* =============== FOOTER =============== */
.site-footer{background:var(--paper); color:var(--ink-dim); border-top:1px solid var(--line); margin-top:64px;}
.footer-built{display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; padding:14px 16px 22px; font-size:13px; border-top:1px solid var(--line); margin-top:12px;}
.footer-built img{width:26px; height:26px; border-radius:6px;}
.footer-built a{color:var(--turquoise); text-decoration:none; font-weight:600;}
.footer-built a:hover{text-decoration:underline;}
.footer-built b{color:var(--ink);}
.footer-sep{opacity:.5;}
.footer-grid{max-width:1160px; margin:0 auto; padding:44px 24px 24px; display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px;}
.footer-col h4{color:var(--ink); font-size:0.78rem; margin:0 0 14px; font-family:'Inter',sans-serif; letter-spacing:0.6px; text-transform:uppercase; font-weight:700;}
.footer-col p{font-size:0.84rem; line-height:1.6; color:var(--ink-dim); margin:0;}
.footer-col ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px;}
.footer-col a{color:var(--ink-dim); text-decoration:none; font-size:0.84rem;}
.footer-col a:hover{color:var(--turquoise); text-decoration:underline;}
.footer-bottom{max-width:1160px; margin:0 auto; padding:16px 24px 30px; border-top:1px solid var(--line); font-size:0.75rem; color:var(--ink-dim); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;}

/* =============== RESPONSIVE =============== */
@media (max-width:900px){
  .hero h1{font-size:2.2rem;}
  .hero-figure{text-align:left;}
  .cat-grid{grid-template-columns:repeat(2,1fr);}
  .two-col{grid-template-columns:1fr; gap:8px;}
  .video-row{grid-template-columns:1fr;}
  .how-ribbon{grid-template-columns:repeat(2,1fr);}
  .how-cell:nth-child(2){border-right:none;}
  .how-cell{border-bottom:1px solid var(--line);}
}
@media (max-width:640px){
  html{font-size:15px;}
  .hero-inner{padding:40px 18px 0;}
  .hero h1{font-size:1.85rem;}
  .hero-figure .big-num{font-size:3.4rem;}
  .hero-search,.content,.breadcrumb{padding-left:18px; padding-right:18px;}
  .search-card{flex-direction:column;}
  .toggle{justify-content:center;}
  .cat-grid{grid-template-columns:repeat(2,1fr);}
  .cat-tile{flex-direction:column; align-items:center; text-align:center; gap:10px; padding:18px 10px;}
  .cat-tile .txt h3{font-size:0.85rem; line-height:1.25;}
  .rcard{padding:14px 16px;}
  .detail-card .inner{padding:22px 18px;}
  .detail-card h2{font-size:1.4rem;}
  .footer-grid{grid-template-columns:1fr 1fr; padding:36px 18px 18px;}
  .footer-bottom{padding:14px 18px 26px; flex-direction:column;}
  .how-ribbon{grid-template-columns:1fr;}
  .how-cell{border-right:none;}
}
@media (max-width:420px){ .footer-grid{grid-template-columns:1fr;} }
@media (pointer:coarse){ .cat-tile,.rcard,.toggle,.faq-q,.back-btn,.share-btn{min-height:44px;} }

/* =============== MOBILE-FIRST REDESIGN (Oct 2026) =============== */

/* --- Situation-led assistant hero --- */
.assistant-block.assistant-hero{
  margin-top:0; border:1px solid var(--line); border-radius:14px; padding:18px 16px;
  background:var(--card);
  box-shadow:0 16px 36px -24px rgba(30,27,22,.2); position:relative; overflow:hidden;
}
.assistant-hero .section-head h2{color:var(--ink); font-size:1.35rem;}
.assistant-hero .section-head .sub{color:var(--ink-dim);}
.assistant-hero textarea{
  border:1px solid var(--line); background:#fff; color:var(--ink);
  font-size:1rem; padding:10px 12px; border-radius:10px; min-height:44px; margin-top:10px;
}
.assistant-hero textarea:focus{outline:none; border-color:var(--turquoise); box-shadow:0 0 0 3px rgba(13,92,89,.12);}
.asst-btn{
  margin-top:10px; width:100%; padding:11px; border:none; border-radius:10px; cursor:pointer;
  background:var(--chile); color:#fff; font-family:'Inter',sans-serif; font-size:.95rem; font-weight:700;
}
.asst-btn:active{transform:scale(.99);}
.asst-row{display:flex; gap:8px; margin-top:10px;}
.asst-row .asst-btn{margin-top:0;}
.asst-row #assistantBtn{flex:1;}
.asst-mic{flex:0 0 46px; width:46px; font-size:1.1rem; background:#fff; border:1px solid var(--line); color:var(--ink);}
.asst-mic.listening{background:#c0392b; animation:micpulse 1.2s infinite;}
@keyframes micpulse{0%,100%{opacity:1;}50%{opacity:.55;}}
.asst-note{margin-top:8px; font-size:.74rem; color:var(--ink-dim); font-family:'Inter',sans-serif;}
.sit-chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px;}
.sit-chips .chip-label{width:100%; color:var(--ink-dim); font-size:.78rem; font-weight:600; font-family:'Inter',sans-serif;}
.sit-chip{
  background:#fff; color:var(--ink); border:1px solid var(--line);
  border-radius:999px; padding:7px 12px; font-family:'Inter',sans-serif; font-size:.8rem; font-weight:600;
  cursor:pointer; min-height:38px;
}
.sit-chip:active{background:var(--turquoise-dim);}
#assistantResults{margin-top:6px;}
#assistantResults .card-list{margin-top:14px;}

/* --- Actionable cards: call / website / directions --- */
.card-actions{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap;}
.card-actions a{
  flex:1; min-width:96px; text-align:center; text-decoration:none;
  font-family:'Inter',sans-serif; font-size:.85rem; font-weight:700;
  padding:11px 8px; border-radius:10px; min-height:44px;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
}
.act-call{background:#1d7a70; color:#fff;}
.act-call:hover{color:#fff;}
.act-web,.act-dir{background:#fff; color:var(--ink); border:1px solid var(--line);}
.detail-actions{display:flex; gap:10px; margin:0 0 18px; flex-wrap:wrap;}
.detail-actions a{
  flex:1; min-width:120px; text-align:center; text-decoration:none;
  font-family:'Inter',sans-serif; font-size:.95rem; font-weight:700;
  padding:14px 10px; border-radius:12px; min-height:52px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}

/* --- Mobile polish --- */
@media (max-width:640px){
  .assistant-block.assistant-hero{border-radius:14px;}
  .hero-inner{padding-top:32px;}
  .hero h1{font-size:1.7rem;}
  .rcard{flex-direction:column;}
  .card-actions{width:100%;}
  .detail-actions a{min-height:56px; font-size:1rem;}
}
@media print{ .topbar{display:none !important;} }

/* =============== PLAYBOOKS / SAVE / SHARE / FEEDBACK (Oct 2026) =============== */
.pb-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px;}
.pb-card{
  background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px;
  display:flex; gap:14px; align-items:center; cursor:pointer;
  transition:transform .12s var(--ease), box-shadow .12s var(--ease);
}
.pb-card:hover{transform:translateY(-2px); box-shadow:0 10px 22px -14px rgba(22,35,58,.3);}
.pb-icon{font-size:1.9rem; line-height:1; flex-shrink:0;}
.pb-txt{flex:1; min-width:0;}
.pb-txt h3{font-size:1.02rem; margin-bottom:3px;}
.pb-txt span{font-family:'Inter',sans-serif; font-size:.82rem; color:var(--ink-dim);}
.pb-arrow{font-size:1.3rem; color:var(--ink-dim); flex-shrink:0;}
.pb-step{display:flex; gap:14px; margin:22px 0 4px; align-items:flex-start;}
.pb-step-num{
  flex-shrink:0; width:38px; height:38px; border-radius:50%;
  background:var(--navy); color:#fff; font-family:'Inter',sans-serif; font-weight:700;
  display:flex; align-items:center; justify-content:center; font-size:1.05rem;
}
.pb-step-body h3{font-size:1.12rem; margin-bottom:4px;}
.pb-step-body p{font-family:'Inter',sans-serif; font-size:.92rem; color:var(--ink-dim); margin:0 0 4px; line-height:1.55;}
.pb-step + .card-list{margin-bottom:26px;}

.saved-link-btn{
  display:flex; width:100%; align-items:center; justify-content:center; gap:8px;
  margin-top:14px; padding:13px; border-radius:12px; cursor:pointer;
  background:var(--card); border:1.5px dashed var(--line); color:var(--ink);
  font-family:'Inter',sans-serif; font-size:.92rem; font-weight:600; min-height:48px;
}
.saved-link-btn:hover{border-color:var(--turquoise);}

.act-save,.act-share{
  flex:1; min-width:96px; text-align:center; cursor:pointer;
  font-family:'Inter',sans-serif; font-size:.85rem; font-weight:700;
  padding:11px 8px; border-radius:10px; min-height:44px;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:#fff; color:var(--ink); border:1px solid var(--line);
}
.fb-block{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:18px 0 4px; padding:14px 16px; background:var(--card);
  border:1px solid var(--line); border-radius:12px;
  font-family:'Inter',sans-serif; font-size:.9rem;
}
.fb-q{font-weight:600; color:var(--ink);}
.fb-btn{
  border:1.5px solid var(--line); background:#fff; border-radius:999px;
  padding:8px 16px; font-size:.88rem; font-weight:600; cursor:pointer; min-height:44px;
  font-family:'Inter',sans-serif; color:var(--ink);
}
.fb-btn:hover{border-color:var(--turquoise);}
.fb-thanks{color:var(--turquoise); font-weight:600;}
@media (max-width:640px){
  .pb-grid{grid-template-columns:1fr;}
}

/* --- AI answer block (hidden until API_BASE is set) --- */
.asst-btn.asst-ai{background:var(--ink);}
.asst-btn:disabled{opacity:.6; cursor:wait;}
.ai-answer{
  margin-top:14px; padding:16px 18px; border-radius:12px;
  background:#fff; color:var(--ink);
  font-family:'Inter',sans-serif; font-size:.94rem; line-height:1.6;
  border:1px solid var(--line); border-left:3px solid var(--turquoise); white-space:pre-wrap;
}

/* =============== STICKY TOP NAV (website header) =============== */
.topbar{position:sticky; top:0; z-index:60; background:rgba(250,247,241,.94);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.topbar-inner{max-width:1160px; margin:0 auto; padding:10px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px;}
.brand{font-family:'Fraunces',serif; font-weight:700; font-size:1.02rem; color:var(--ink); text-decoration:none; display:flex; align-items:center;}
.brand:hover{color:var(--ink);}
.brand-mark{color:var(--turquoise); font-size:.8rem;}
.topnav{display:flex; align-items:center; gap:2px;}
.topnav a{font-family:'Inter',sans-serif; font-size:.86rem; font-weight:600; color:var(--ink-dim);
  text-decoration:none; padding:8px 12px; border-radius:8px; white-space:nowrap;}
.topnav a:hover{color:var(--ink); background:rgba(30,27,22,.05);}
.topnav a.active{color:var(--turquoise);}
.topnav a.tn-help{color:var(--chile);}
.topnav a.tn-help:hover{background:var(--chile-dim); color:var(--chile);}
@media (max-width:640px){
  .topbar-inner{padding:8px 18px;}
  .brand{font-size:.9rem;}
  .topnav a{padding:8px 7px; font-size:.78rem;}
}