/* A clear first impression and comfortable reading on small screens. */
.instagram-icon { background: radial-gradient(circle at 25% 105%, #ffd776 0%, #f7a044 23%, #ed3e65 48%, #ba2aa2 70%, #5749c5 100%); }
.instagram-icon img { display: block; object-fit: contain; }
footer { padding: 64px 0 28px; }
footer .footer-main { grid-template-columns: 1.15fr 1fr 1fr; gap: 48px; padding-bottom: 40px; }
footer .footer-brand { align-items: center; font-size: 1.0625rem; gap: 16px; }
footer .footer-brand .brand-symbol { width: 76px; height: 76px; }
footer .footer-contact, footer .footer-links { font-size: .9375rem; line-height: 1.9; }
footer .footer-contact strong, footer .footer-links strong { font-size: .9375rem; margin-bottom: 16px; }
footer .footer-links { gap: 12px; }
footer .footer-links strong { margin-bottom: 2px; }
footer .copyright { margin-top: 0; padding-top: 24px; border-top: 1px solid #ffffff26; font-size: .8125rem; color: #e6d1da; }
@media (max-width: 760px) {
  footer { padding: 40px 0 24px; }
  footer .footer-main { grid-template-columns: 1fr; gap: 28px; padding-bottom: 28px; }
  footer .footer-brand .brand-symbol { width: 64px; height: 64px; }
  footer .footer-contact, footer .footer-links { border-top: 1px solid #ffffff26; padding-top: 24px; }
  footer .footer-links a { min-height: 44px; display: inline-flex; align-items: center; }
  footer .copyright { flex-direction: column; gap: 12px; }
}
.mobile-menu,
.mobile-dock { display: none; }
.hero-heading-intro,
.hero-heading-main { display: block; }
.hero-instagram {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  color: #843d56;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.7;
}
.hero-instagram > .instagram-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 22px;
  flex: none;
}
.hero-instagram:hover > span:last-child { text-decoration: underline; text-underline-offset: 4px; }
.hero-aside { margin-top: 22px; }
button:focus-visible,
summary:focus-visible { outline: 3px solid #ba7e43; }

@media (max-width: 760px) {
  :root { --header-height: 72px; }
  html { scroll-padding-top: calc(var(--sticky-height, 72px) + 16px); }
  body { padding-bottom: calc(var(--dock-height, 76px) + 12px); }
  .container { width: min(calc(100% - 40px), 560px); }
  .header-inner {
    position: relative;
    min-height: var(--header-height);
    padding-block: 10px;
    gap: 12px;
    flex-wrap: wrap;
  }
  .header .brand { font-size: .875rem; gap: 9px; }
  .header .brand small { font-size: .75rem; letter-spacing: .1em; }
  .header .brand-symbol { width: 46px; height: 46px; }
  .header-cta { display: none; }
  .mobile-menu { display: block; margin-left: auto; }
  .mobile-menu > summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    list-style: none;
    cursor: pointer;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #e7d0d7;
    border-radius: 8px;
    font-size: .875rem;
    font-weight: 600;
    background: #fff;
  }
  .mobile-menu > summary::-webkit-details-marker { display: none; }
  .menu-symbol { width: 16px; height: 11px; border-block: 2px solid #843d56; }
  .mobile-menu[open] > summary { color: #843d56; background: #ffecef; }
  .mobile-menu > nav {
    position: absolute;
    top: calc(100% + 1px);
    left: -20px;
    right: -20px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 18px 20px 22px;
    max-height: calc(100svh - var(--sticky-height, 72px) - var(--dock-height, 76px) - 16px);
    overflow-y: auto;
    background: #fff9f6;
    border-bottom: 1px solid #e7d0d7;
    box-shadow: 0 14px 20px #4c2b3912;
  }
  .mobile-menu nav a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #f1e3e5;
    border-radius: 8px;
    color: #643c4b;
    font-size: .875rem;
    line-height: 1.7;
  }
  .mobile-menu nav a:hover { background: #ffecef; }

  .hero { min-height: 0; }
  .hero-content { order: 1; padding: 32px 20px 26px; }
  .hero .overline { font-size: .75rem; letter-spacing: .06em; line-height: 1.8; margin-bottom: 16px; }
  .hero h1 { font-size: clamp(1.45rem, 7.5vw, 2rem); letter-spacing: 0; line-height: 1.6; margin-bottom: 20px; }
  .hero-heading-intro { font-size: .76em; margin-bottom: 3px; }
  .hero-heading-main { text-wrap: balance; }
  .hero h1 em { display: inline-block; }
  .hero-copy { font-size: 1rem; line-height: 1.9; margin-bottom: 22px; text-wrap: balance; }
  .hero-actions { display: grid; gap: 10px; }
  .hero-actions .button { width: 100%; min-height: 56px; padding: 10px 16px; font-size: 1rem; border-radius: 9px; }
  .hero-actions .line-link-icon { width: 32px; height: 32px; }
  .hero-actions .text-link { justify-self: center; padding: 10px 2px 5px; font-size: .875rem; min-height: 38px; }
  .hero-instagram { display: flex; width: fit-content; margin: 18px auto 0; min-height: 44px; padding: 7px 12px; border-radius: 8px; background: #fff9f6; }
  .hero-aside { margin-top: 16px; font-size: .75rem; text-align: center; line-height: 1.8; }
  .hero-media { order: 2; height: clamp(190px, 56vw, 300px); min-height: 0; }
  .hero-media img { object-position: center 36%; }
  .photo-note { right: 14px; bottom: 12px; }

  .section { padding-block: 52px; }
  .section h2 { font-size: clamp(1.375rem, 6.4vw, 1.875rem); line-height: 1.65; letter-spacing: .01em; text-wrap: balance; margin-bottom: 18px; }
  .section h2 br { display: none; }
  .section-top { margin-bottom: 26px; }
  .section-top > p { max-width: none; margin-top: 16px; font-size: 1rem; line-height: 1.9; }
  .eyebrow { font-size: .75rem; letter-spacing: .12em; margin-bottom: 14px; }
  .section-intro, .worry-list p, .support-card p, .step-list p,
  .social-card p, .contact-card p, .faq-grid > div > p:last-child { font-size: 1rem; line-height: 1.9; }
  .worry-grid, .faq-grid { gap: 26px; }
  .worry-list p { gap: 16px; padding-block: 19px; align-items: baseline; }
  .worry-list span { font-size: 1.25rem; }
  .brand-strip-inner { padding-block: 24px; gap: 12px 16px; }
  .brand-strip-inner p { font-size: .875rem; line-height: 1.85; }
  .brand-strip a { min-height: 38px; padding-top: 4px; }
  .promise { padding-block: 42px; }
  .promise p { margin-bottom: 20px; font-size: .875rem; line-height: 1.9; }
  .promise h2 { font-size: clamp(1.25rem, 5.5vw, 1.625rem); line-height: 1.95; margin: 0; text-wrap: balance; }
  .promise h2 span { display: inline; }
  .support-grid { gap: 16px; }
  .support-card { padding: 24px; border-top-width: 3px; border-radius: 9px; }
  .support-card h3 { font-size: 1.25rem; line-height: 1.6; margin: 15px 0 12px; text-wrap: balance; }
  .card-number { font-size: .875rem; }
  .support-note { margin-top: 22px; padding: 20px; border-radius: 9px; }
  .support-note p { font-size: .875rem; }

  .ibj-overview { gap: 22px; }
  .ibj-feature { border-radius: 9px; }
  .ibj-banner-grid { gap: 12px; }
  .ibj-banner { padding: 14px 10px; min-height: 176px; border-radius: 9px; gap: 12px; }
  .ibj-banner-frame { height: 104px; }
  .ibj-banner img { max-height: 104px; }
  .ibj-banner-label { font-size: .875rem; text-wrap: balance; }
  .ibj-banner:last-child { width: 100%; }
  .ibj-fineprint { font-size: .75rem; line-height: 1.95; }
  .step-list li { grid-template-columns: 38px minmax(0, 1fr); gap: 14px; padding: 22px 0; }
  .step-list li > span { font-size: 1.5rem; line-height: 1.5; }
  .step-list h3 { font-size: 1.125rem; line-height: 1.7; }

  .plan-grid, .social-grid, .guide-grid, .contact-grid { gap: 18px; }
  .plan-card { padding: 24px 20px; border-radius: 10px; }
  .plan-head h3 { font-size: 1.5rem; }
  .plan-card dl > div { flex-wrap: wrap; gap: 6px 12px; padding-block: 16px; }
  .plan-card dt { font-size: .875rem; }
  .plan-card dd { margin-left: auto; font-size: clamp(1.625rem, 7vw, 2rem); }
  .plan-card .price-unit { font-size: .875rem; }
  .plan-link { font-size: .875rem; min-height: 44px; padding-block: 9px; }
  .plan-note { font-size: .75rem; line-height: 1.95; }
  .social-card, .contact-card { padding: 24px; border-radius: 10px; min-width: 0; }
  .social-card h3, .contact-card h3 { font-size: 1.375rem; line-height: 1.6; }
  .social-card a { min-height: 44px; padding-block: 10px; font-size: .875rem; overflow-wrap: anywhere; }
  .guide-card { padding: 24px; border-radius: 10px; }
  .guide-card h3 { font-size: 1.25rem; line-height: 1.7; text-wrap: balance; }
  .guide-card p { font-size: 1rem; line-height: 1.9; }
  .guide-card > span, .guide-card b { font-size: .875rem; }
  .faq-items summary { padding-block: 20px; font-size: 1rem; line-height: 1.75; }
  .faq-items details p { padding-right: 0; font-size: 1rem; line-height: 1.9; }
  .contact { background: #fff9f6; }
  .contact-card { border-color: #ead9da; }
  .contact-tag { color: #843d56; font-size: .875rem; }
  .contact-card .button { width: 100%; min-height: 54px; border-radius: 9px; font-size: .875rem; }
  .button-outline { border-color: #843d56; color: #843d56; }
  .final-cta h2 { max-width: 26rem; margin-inline: auto; font-size: clamp(1.375rem, 6.1vw, 1.875rem); }
  .final-cta p:not(.eyebrow) { font-size: 1rem; line-height: 1.9; }
  .final-actions { gap: 10px; }
  .final-actions .button { width: 100%; border-radius: 9px; font-size: 1rem; }
  .final-line { min-height: 44px; padding-top: 14px; font-size: .875rem; }

  .article-header { padding: 34px 0 38px; background: #fff0ef; }
  .article-header h1 { font-size: clamp(1.5rem, 7vw, 2rem); line-height: 1.7; text-wrap: balance; }
  .article-title-lead { display: block; font-size: .82em; color: #65525a; margin-bottom: 8px; }
  .article-title-main { display: block; }
  .breadcrumb { font-size: .75rem; line-height: 1.9; }
  .article-lead { font-size: 1rem; color: #65525a; line-height: 1.95; }
  .article-body { padding-block: 42px 52px; }
  .article-body h2 { font-size: 1.375rem; line-height: 1.75; margin-top: 38px; text-wrap: balance; }
  .article-body p, .article-body li { font-size: 1rem; line-height: 2; }
  .article-callout { padding: 20px; background: #fff0ef; border-color: #bd5574; }
  .article-body .button { width: 100%; border-radius: 9px; }
  .article-form-link { display: block; width: fit-content; min-height: 44px; padding-block: 10px; margin: 10px auto 0; font-size: .875rem; }
  .article-related a { color: #843d56; font-size: 1rem; line-height: 1.9; }
  .footer-main { gap: 28px; }
  .footer-contact, .footer-links { font-size: .875rem; }
  .footer-links a { min-height: 36px; padding-top: 4px; }
  .copyright { font-size: .75rem; }

  .mobile-dock {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: #fff9f6f5;
    border-top: 1px solid #ead9da;
    box-shadow: 0 -4px 20px #4c2b3910;
    backdrop-filter: blur(14px);
  }
  .mobile-dock a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 52px;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 9px;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
  }
  .dock-line { background: #843d56; color: #fff; }
  .dock-line img { width: 28px; height: 28px; object-fit: contain; flex: none; }
  .dock-form { background: #fff; color: #843d56; border: 1px solid #d7a9b8; }
}
@media (max-width: 360px) {
  .hero-content { padding-inline: 18px; }
  .container { width: calc(100% - 36px); }
  .hero h1 { font-size: clamp(1.4rem, 7.3vw, 1.75rem); }
  .mobile-menu > summary { padding-inline: 10px; }
  .mobile-dock { gap: 8px; padding-inline: 12px; }
  .mobile-dock a { padding-inline: 6px; font-size: .8125rem; gap: 6px; }
  .dock-line img { width: 24px; height: 24px; }
  .social-card, .contact-card, .guide-card, .support-card { padding: 22px 20px; }
}