/* ============================================================
   恋愛占いナビ — Design System v2
   Concept: 「元気なポータル×バナー広告メディア」
   参考: cocoloni占い館 (honkaku-uranai.jp) — 白背景×オレンジ/ピンク、
   バナーカードで占い師・サービスを見せる本格ポータルの空気感。
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700;900&display=swap');

:root{
  --bg:         #fffaf9;
  --bg-soft:    #FFF4F7;
  --white:      #ffffff;
  --orange:     #FF7503;
  --orange-deep:#d96300;
  --orange-soft:#FFE3C7;
  --pink:       #F42179;
  --pink-deep:  #C71760;
  --pink-soft:  #FFD2DA;
  --purple:     #A64CD4;
  --purple-soft:#F0DEFA;
  --mint:       #00A2B8;
  --mint-soft:  #D8F3F6;
  --text-dark:  #1F2121;
  --text-dim:   #72787A;
  --line:       #F2F5F5;
  --white-text: #fffdf9;

  --heading-font:"Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --sans:        "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --accent-font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

  --radius-card: 20px;
  --radius-pill: 999px;
  --shadow-soft: 0 12px 28px -16px rgba(140,90,40,0.28);
  --shadow-deep: 0 20px 44px -18px rgba(140,60,40,0.32);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text-dark);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--heading-font); margin:0; font-weight:700; letter-spacing:.01em; }
p{ margin:0 0 1em; }
.container{ max-width:1120px; margin:0 auto; padding:0 24px; }
.container--narrow{ max-width:760px; }

/* ============ PR disclosure bar ============ */
.pr-bar{
  background:var(--text-dark); color:#e8ded4;
  font-size:11.5px; letter-spacing:.03em; text-align:center;
  padding:7px 12px;
}
.pr-bar a{ color:var(--orange-soft); text-decoration:underline; text-underline-offset:2px; }

/* ============ Header ============ */
.site-header{
  background:var(--white); color:var(--text-dark);
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid var(--line);
  box-shadow:0 2px 10px rgba(140,90,40,0.05);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:14px; padding-bottom:14px;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{ width:30px; height:30px; flex:none; }
.brand-name{ font-size:20px; font-weight:700; letter-spacing:.02em; font-family:var(--heading-font); color:var(--pink-deep); }
.brand-sub{
  display:block; font-family:var(--accent-font);
  font-size:10.5px; color:var(--text-dim); letter-spacing:.03em; margin-top:1px;
}
.main-nav{ display:flex; gap:8px; }
.main-nav a{
  font-size:14px; font-weight:700; letter-spacing:.01em; color:var(--text-dim);
  position:relative; padding:9px 16px; border-radius:var(--radius-pill); transition:.2s ease;
}
.main-nav a:hover{ background:var(--pink-soft); color:var(--pink-deep); }
.main-nav a.is-active{ background:var(--pink); color:#fff; }
.nav-toggle{ display:none; }

@media (max-width:860px){
  .main-nav{
    position:fixed; inset:60px 0 0 0; background:var(--white); flex-direction:column;
    padding:20px 24px; gap:10px; transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .25s ease, transform .25s ease; border-top:1px solid var(--line);
  }
  .main-nav.is-open{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .main-nav a{ width:100%; }
  .nav-toggle{
    display:block; background:var(--pink-soft); border:none; color:var(--pink-deep);
    width:38px; height:38px; border-radius:50%; font-size:16px;
  }
}

/* ============ Topband banner carousel (like the orange promo strip) ============ */
.topband{
  background:linear-gradient(100deg,var(--orange),#FFA64D 60%,var(--orange));
  padding:26px 0 34px;
}
.banner-row{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.promo-banner{
  background:var(--white); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-soft);
  display:flex; flex-direction:column;
}
.promo-banner__art{
  height:132px; position:relative; display:flex; align-items:flex-end; padding:16px;
  color:#fff; overflow:hidden;
}
.promo-banner__art.c1{
  background-image:linear-gradient(150deg,rgba(255,111,168,.72),rgba(244,33,121,.82)), url("/images/tarot-candles.jpg");
  background-size:cover,cover; background-position:center,center;
}
.promo-banner__art.c2{
  background-image:linear-gradient(150deg,rgba(255,178,92,.72),rgba(255,117,3,.82)), url("/images/tarot-spread.jpg");
  background-size:cover,cover; background-position:center,center;
}
.promo-banner__art.c3{
  background-image:linear-gradient(150deg,rgba(92,209,224,.72),rgba(0,162,184,.82)), url("/images/moon-half.jpg");
  background-size:cover,cover; background-position:center,center;
}
.promo-banner__badge{
  position:absolute; top:12px; left:12px; background:#fff; color:var(--pink-deep);
  font-size:11px; font-weight:700; padding:4px 10px; border-radius:var(--radius-pill);
}
.promo-banner__title{ font-family:var(--heading-font); font-size:17px; line-height:1.4; text-shadow:0 2px 8px rgba(0,0,0,.25); }
.promo-banner__foot{ padding:12px 16px; font-size:12.5px; color:var(--text-dim); }

/* ============ Buttons ============ */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--sans); font-weight:700; font-size:14.5px; letter-spacing:.01em;
  padding:14px 26px; border-radius:var(--radius-pill); border:2px solid transparent; cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--pink); color:#fff; box-shadow:var(--shadow-soft); }
.btn-primary:hover{ background:var(--pink-deep); }
.btn-ghost{ border-color:var(--orange); color:var(--orange-deep); background:#fff; }
.btn-ghost:hover{ background:var(--orange-soft); }
.btn-block{ width:100%; justify-content:center; }
.btn-sm{ padding:9px 16px; font-size:13px; }

.cta-benefit{
  display:block; font-family:var(--accent-font); font-size:13px;
  color:var(--pink-deep); margin-bottom:8px; font-weight:600;
}
.cta-block{ text-align:center; }

/* ============ Section basics ============ */
.section{ padding:64px 0; }
.section--soft{ background:var(--bg-soft); }
.section--panel{ background:var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section-head{ text-align:center; margin-bottom:40px; }
.section-head h2{ font-size:clamp(22px,2.8vw,30px); }
.section-head p{ color:var(--text-dim); max-width:34em; margin:12px auto 0; font-size:14.5px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--accent-font); font-weight:600; font-size:13px;
  color:var(--pink-deep); letter-spacing:.04em; margin-bottom:14px; text-transform:uppercase;
}
.eyebrow::before{ content:"◆"; font-size:9px; color:var(--orange); }
.section-head .eyebrow{ justify-content:center; }

/* ============ Hero (bright, replaces old dark hero) ============ */
.hero{ padding:52px 0 40px; background:var(--white); }
.hero h1{ font-size:clamp(26px,3.6vw,40px); line-height:1.5; max-width:18em; color:var(--text-dark); }
.hero h1 em{ font-style:normal; color:var(--pink); }
.lede{ margin-top:18px; max-width:38em; color:var(--text-dim); font-size:15.5px; line-height:1.9; }
.article-hero .lede{ color:rgba(255,255,255,.92); }
.hero-cta-row{ margin-top:26px; display:flex; gap:14px; flex-wrap:wrap; }
.hero__moon{ display:none; }
.star-noise{ display:none; }

/* ============ Layout with sidebar ============ */
.layout{ display:grid; grid-template-columns:250px 1fr; gap:28px; align-items:start; }
@media (max-width:860px){ .layout{ grid-template-columns:1fr; } }

.sidebar-card{
  background:var(--white); border:1px solid var(--line); border-radius:16px; padding:6px;
  box-shadow:var(--shadow-soft); margin-bottom:18px;
}
.quicklink{
  display:flex; align-items:center; gap:10px; padding:12px 10px; border-radius:12px;
  font-size:13.5px; font-weight:700; transition:.2s;
}
.quicklink:hover{ background:var(--bg-soft); }
.quicklink .dot{ width:28px; height:28px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-size:13px; color:#fff; }
.quicklink .name{ flex:1; }
.quicklink .cat{ font-size:10px; padding:3px 8px; border-radius:var(--radius-pill); font-weight:700; }
.cat-free{ background:#fff; border:1px solid var(--orange); color:var(--orange-deep); }
.cat-phone{ background:var(--pink); color:#fff; }
.cat-chat{ background:var(--purple); color:#fff; }

.keyword-box{ background:var(--white); border:1px solid var(--line); border-radius:16px; padding:18px; box-shadow:var(--shadow-soft); }
.keyword-box h5{ font-size:12.5px; color:var(--text-dim); margin:0 0 10px; font-weight:700; }
.keyword-cloud{ display:flex; flex-wrap:wrap; gap:6px; }
.keyword-cloud a{
  font-size:12px; background:var(--bg-soft); color:var(--text-dim); padding:5px 11px; border-radius:var(--radius-pill);
  transition:.2s;
}
.keyword-cloud a:hover{ background:var(--pink-soft); color:var(--pink-deep); }

/* ============ Tab nav (悩み別/恋愛カテゴリ) ============ */
.tab-nav{ display:flex; gap:26px; border-bottom:1px solid var(--line); margin-bottom:28px; flex-wrap:wrap; }
.tab-nav a{
  font-size:15px; font-weight:700; color:var(--text-dim); padding:6px 2px 14px; position:relative;
}
.tab-nav a.is-active{ color:var(--pink); }
.tab-nav a.is-active::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px; background:var(--pink); border-radius:2px; }

/* ============ 悩み別タイル / バナーグリッド ============ */
.nayami-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.nayami-tile{
  background:var(--white); border:1px solid var(--line);
  border-radius:16px; overflow:hidden; position:relative;
  transition:transform .2s ease, box-shadow .2s ease; box-shadow:var(--shadow-soft);
}
.nayami-tile:hover{ transform:translateY(-4px); }
.nayami-tile__art{
  height:74px; display:flex; align-items:center; padding:0 18px; position:relative; overflow:hidden;
}
.nayami-tile__art .tag{
  position:absolute; top:10px; left:14px; background:rgba(255,255,255,.92); color:var(--pink-deep);
  font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:var(--radius-pill);
}
.nayami-tile__art .num{ font-family:var(--accent-font); font-size:30px; color:rgba(255,255,255,.55); position:absolute; right:14px; }
.nayami-tile .body{ padding:16px 18px 18px; }
.nayami-tile h3{ font-size:16.5px; margin:0 0 8px; }
.nayami-tile p{ font-size:13px; color:var(--text-dim); margin-bottom:10px; }
.nayami-tile .go{ font-size:12.5px; color:var(--pink-deep); font-weight:700; }
.art-1{
  background-image:linear-gradient(135deg,rgba(255,111,168,.68),rgba(244,33,121,.82)), url("/images/couple-sunset.jpg");
  background-size:cover,cover; background-position:center,center;
}
.art-2{
  background-image:linear-gradient(135deg,rgba(255,178,92,.68),rgba(255,117,3,.82)), url("/images/candle.jpg");
  background-size:cover,cover; background-position:center,center;
}
.art-3{
  background-image:linear-gradient(135deg,rgba(200,150,235,.68),rgba(166,76,212,.82)), url("/images/tarot-celtic.jpg");
  background-size:cover,cover; background-position:center,center;
}
.art-4{
  background-image:linear-gradient(135deg,rgba(92,209,224,.68),rgba(0,162,184,.82)), url("/images/milkyway.jpg");
  background-size:cover,cover; background-position:center,center;
}
.art-5{
  background-image:linear-gradient(135deg,rgba(255,152,140,.68),rgba(212,65,55,.82)), url("/images/wedding-rings.jpg");
  background-size:cover,cover; background-position:center,center;
}
.art-6{
  background-image:linear-gradient(135deg,rgba(150,190,235,.68),rgba(28,103,215,.82)), url("/images/sunrise-ocean.jpg");
  background-size:cover,cover; background-position:center,center;
}

@media (max-width:760px){ .nayami-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .nayami-grid{ grid-template-columns:1fr; } }

/* ============ 比較表(早見表) ============ */
.compare-table{ width:100%; border-collapse:collapse; background:var(--white); border:1px solid var(--line); font-size:14px; border-radius:12px; overflow:hidden; }
.compare-table caption{ text-align:left; font-family:var(--heading-font); font-size:15px; padding-bottom:12px; }
.compare-table th,.compare-table td{ padding:15px 14px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; }
.compare-table thead th{ background:var(--text-dark); color:#fff; font-weight:700; font-size:12.5px; letter-spacing:.02em; }
.compare-table tbody tr:hover{ background:var(--bg-soft); }
.rank-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%; background:var(--pink); color:#fff;
  font-family:var(--accent-font); font-weight:700; font-size:13px; margin-right:8px;
}
.rank-badge.gold{ background:var(--orange); color:#fff; }
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table-scroll .compare-table{ min-width:640px; }

/* ============ 占い師カード（本格ポータル風の顔グリッド） ============ */
.teller-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.teller-card{ background:var(--white); border:1px solid var(--line); border-radius:14px; padding:14px; text-align:center; box-shadow:var(--shadow-soft); }
.teller-avatar{
  width:64px; height:64px; border-radius:50%; margin:0 auto 10px; border:3px solid var(--pink-soft);
  background:linear-gradient(160deg,#ffb199,#ef4577); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:var(--heading-font); font-size:20px;
}
.teller-card h4{ font-size:13.5px; margin-bottom:4px; }
.teller-card p{ font-size:11.5px; color:var(--text-dim); margin:0; }
@media (max-width:700px){ .teller-grid{ grid-template-columns:repeat(2,1fr); } }

.uranaishi-card{
  background:var(--white); border:1px solid var(--line);
  border-radius:16px; padding:22px; box-shadow:var(--shadow-soft);
  display:flex; gap:18px;
}
.uranaishi-avatar{
  flex:none; width:68px; height:68px; border-radius:50%;
  background:linear-gradient(160deg,#ffb199,var(--pink));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--heading-font); font-size:22px; border:3px solid var(--pink-soft);
}
.uranaishi-name{ font-size:16.5px; margin-bottom:4px; font-family:var(--heading-font); }
.uranaishi-name .yomi{ font-family:var(--accent-font); font-size:12px; color:var(--text-dim); margin-left:6px; }
.uranaishi-meta{ font-size:12px; color:var(--text-dim); margin-bottom:8px; }
.uranaishi-meta span{ margin-right:10px; }
.uranaishi-quote{
  font-size:13.5px; color:var(--text-dark); background:var(--bg-soft);
  padding:12px 14px; border-left:3px solid var(--pink); margin:10px 0; border-radius:0 8px 8px 0;
}
.uranaishi-quote small{ display:block; margin-top:6px; color:var(--text-dim); font-size:11.5px; }

/* ============ 記事タイポグラフィ ============ */
.article-hero{ background:linear-gradient(100deg,var(--orange),#FFA64D 65%,var(--orange)); color:#fff; padding:44px 0 48px; position:relative; background-size:cover; background-position:center; }
.article-hero--fukuen{ background-image:linear-gradient(100deg,rgba(255,117,3,.86),rgba(255,166,77,.72) 65%,rgba(255,117,3,.86)), url("/images/couple-sunset.jpg"); }
.article-hero--ranking{ background-image:linear-gradient(100deg,rgba(255,117,3,.86),rgba(255,166,77,.72) 65%,rgba(255,117,3,.86)), url("/images/moon-half.jpg"); }
.article-hero--vernis{ background-image:linear-gradient(100deg,rgba(255,117,3,.86),rgba(255,166,77,.72) 65%,rgba(255,117,3,.86)), url("/images/tarot-candles.jpg"); }
.article-hero--tarot{ background-image:linear-gradient(100deg,rgba(255,117,3,.86),rgba(255,166,77,.72) 65%,rgba(255,117,3,.86)), url("/images/tarot-spread.jpg"); }
.article-hero .eyebrow{ color:#fff; }
.article-hero .eyebrow::before{ color:#fff; }
.article-hero h1{ color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.12); }
.article-body{ padding:48px 0 64px; }
.article-body h2{ font-size:24px; margin:46px 0 18px; padding-bottom:12px; border-bottom:3px solid var(--pink-soft); position:relative; }
.article-body h2::before{ content:""; position:absolute; left:0; bottom:-3px; width:56px; height:3px; background:var(--pink); }
.article-body h2:first-child{ margin-top:0; }
.article-body h3{ font-size:18px; margin:26px 0 12px; color:var(--pink-deep); }
.article-body p{ font-size:15px; color:#3a322c; }
.lead-para{ font-size:16px; line-height:2; padding:20px 22px; background:var(--bg-soft); border-left:4px solid var(--pink); border-radius:0 12px 12px 0; margin-bottom:8px; }
.ng-list{ background:var(--bg-soft); border-radius:12px; padding:20px 24px; margin:18px 0; }
.ng-list li{ font-size:14px; padding:7px 0 7px 24px; position:relative; }
.ng-list li::before{ content:"×"; position:absolute; left:0; color:var(--pink-deep); font-weight:700; }
.ok-list li::before{ content:"○"; color:var(--mint); }

.meta-row{ display:flex; gap:16px; align-items:center; font-size:12px; color:rgba(255,255,255,.85); margin-top:18px; flex-wrap:wrap; }
.meta-row .divider-dot::before{ content:"・"; }

/* ============ PR/CTAバナー(記事内挿入) ============ */
.inline-cta{
  background:var(--white); border:1px solid var(--line);
  border-radius:18px; margin:30px 0; overflow:hidden;
  display:flex; align-items:stretch; gap:0; flex-wrap:wrap;
  box-shadow:var(--shadow-soft);
}
.inline-cta__art{
  flex:0 0 140px; background:linear-gradient(150deg,#FF6FA8,var(--pink));
  display:flex; align-items:center; justify-content:center; color:#fff;
  font-family:var(--heading-font); font-size:15px; text-align:center; padding:12px;
}
.inline-cta__body{ flex:1; padding:22px 24px; min-width:220px; }
.inline-cta__service{ font-family:var(--accent-font); font-weight:600; color:var(--pink-deep); font-size:13px; margin-bottom:6px; }
.inline-cta h4{ font-size:18px; margin-bottom:6px; }
.inline-cta p{ font-size:13px; color:var(--text-dim); margin:0; }
.inline-cta__action{ flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:18px 24px; background:var(--bg-soft); }
@media (max-width:640px){
  .inline-cta{ flex-direction:column; }
  .inline-cta__art{ flex:none; width:100%; height:64px; }
  .inline-cta__action{ width:100%; }
}

/* ============ 人気メニュー banner(価格つき) ============ */
.menu-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.menu-banner{ background:var(--white); border:1px solid var(--line); border-radius:14px; overflow:hidden; display:flex; box-shadow:var(--shadow-soft); }
.menu-banner__art{ flex:0 0 92px; display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--heading-font); font-size:13px; text-align:center; }
.menu-banner__body{ padding:12px 14px; flex:1; }
.menu-banner__body h5{ font-size:13.5px; margin:0 0 6px; font-family:var(--heading-font); }
.menu-banner__price{ font-family:var(--accent-font); font-weight:600; color:var(--pink-deep); font-size:13px; }
@media (max-width:600px){ .menu-grid{ grid-template-columns:1fr; } }

/* ============ タロット診断 ============ */
.tarot-deck{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; padding:18px 0 8px; }
.tarot-card{
  width:96px; height:154px; border-radius:14px;
  background:linear-gradient(150deg,#FF6FA8,var(--pink) 55%,var(--orange));
  border:none; cursor:pointer; position:relative;
  display:flex; align-items:center; justify-content:center;
  transition:transform .3s ease, box-shadow .3s ease; box-shadow:var(--shadow-soft);
}
.tarot-card:hover{ transform:translateY(-8px) rotate(-1deg); box-shadow:var(--shadow-deep); }
.tarot-card .mark{
  width:30px; height:30px; border:2px solid rgba(255,255,255,.8); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:14px;
}
.tarot-card.is-picked{ outline:3px solid var(--orange-deep); outline-offset:2px; }
.tarot-result{
  display:none; background:var(--white); border:1px solid var(--line);
  border-radius:18px; padding:32px; margin-top:30px; box-shadow:var(--shadow-soft);
}
.tarot-result.is-visible{ display:block; animation:reveal .5s ease; }
@keyframes reveal{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:translateY(0);} }
.tarot-result__card-name{ font-family:var(--accent-font); font-weight:600; color:var(--pink-deep); font-size:14px; }
.tarot-result h3{ font-size:22px; margin:8px 0 14px; }
.tarot-hint{ text-align:center; color:var(--text-dim); font-size:13px; margin-top:10px; }

/* ============ 口コミ ============ */
.review-quote{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:18px 20px; margin-bottom:12px; }
.review-quote__source{ display:flex; justify-content:space-between; font-size:11.5px; color:var(--text-dim); margin-top:10px; }

/* ============ FAQ ============ */
.faq-item{ border-bottom:1px solid var(--line); padding:18px 0; }
.faq-item summary{ cursor:pointer; font-family:var(--heading-font); font-size:16px; list-style:none; display:flex; gap:12px; }
.faq-item summary::before{ content:"Q"; color:var(--pink); font-family:var(--accent-font); font-weight:700; }
.faq-item[open] summary{ color:var(--pink-deep); }
.faq-item p{ margin:12px 0 0 26px; font-size:14px; color:var(--text-dim); }

/* ============ フッター ============ */
.site-footer{ background:#2a2420; color:#b8ab9e; padding:48px 0 26px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px; margin-bottom:30px; }
.footer-grid h5{ color:var(--orange-soft); font-size:13px; letter-spacing:.03em; margin-bottom:12px; }
.footer-grid a{ display:block; font-size:13px; padding:4px 0; color:#b8ab9e; }
.footer-grid a:hover{ color:#fff; }
.footer-disclosure{ font-size:11px; line-height:1.85; color:#8a7d70; border-top:1px solid #453d36; padding-top:20px; max-width:820px; }
.footer-bottom{ font-size:11px; color:#7a6e62; margin-top:16px; }
@media (max-width:720px){ .footer-grid{ grid-template-columns:1fr 1fr; } }

/* ============ Utility ============ */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:760px){ .grid-2,.grid-3,.banner-row{ grid-template-columns:1fr; } }
.tag-pill{
  display:inline-block; font-size:11px; padding:4px 11px; font-weight:700;
  color:var(--orange-deep); background:#fff; border:1px solid var(--orange); border-radius:var(--radius-pill); margin:2px 4px 2px 0;
}
.tag-pill.pink{ background:var(--pink); color:#fff; border-color:var(--pink); }
.tag-pill.purple{ background:var(--purple); color:#fff; border-color:var(--purple); }
.badge-proto{
  position:fixed; bottom:18px; right:18px; z-index:99; background:var(--pink); color:#fff;
  font-size:11px; padding:8px 14px; border-radius:var(--radius-pill); box-shadow:var(--shadow-deep); letter-spacing:.02em;
}