/* ─────────────────────────────────────────
   PAGE TASTE ANALYSIS — 食品の検査－おいしさ分析
   Full-width 1280 layout, no sidebar.
   ───────────────────────────────────────── */

:root {
    --tas-teal:       #008F8D;
    --tas-teal-2:     #4DB1AF;
    --tas-teal-soft:  #E7F6F5;
    --tas-orange:     #FE7F00;
    --tas-navy:       #061C3D;
    --tas-body:       #333F50;
    --tas-gray:       #6A778B;
    --tas-border:     #CCCCCC;
    --tas-bg-soft:    #F3F1EA;
    --tas-bg-faq:     #E7F6F5;
}

/* ── Page-wide horizontal grid ── */
.tas-title-band-wrap,
.sn-breadcrumb-wrap,
.tas-hero-section,
.tas-intro-section,
.tas-customers-section,
.tas-mid-cta-wrap,
.tas-solution-section,
.tas-detail-cards-section,
.tas-pill-buttons-section,
.tas-slogan-section,
.tas-howto-section,
.tas-example-section,
.tas-pricing-section,
.tas-faq-wrap,
.tas-caution-wrap,
.tas-flow-section,
.tas-related-section {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 40px;
    padding-right: 40px;
    box-sizing: border-box;
}

/* ── Title band (top of page) ── */
.tas-title-band-wrap { margin-top: 24px; }
.tas-title-band {
    display: inline-block;
    background: var(--tas-teal-2);
    color: #fff;
    font-size: 26px; font-weight: 700; line-height: 1;
    padding: 18px 48px 18px 28px;
    margin: 0;
}

/* ── Section (D) — teal-line title band + subtitle ── */
.tas-hero-section {
    margin-top: 48px;
    display: flex; flex-direction: column; align-items: center; gap: 24px;
}
.tas-hero-heading {
    display: flex; align-items: center; gap: 20px;
    width: 100%; justify-content: center;
}
.tas-hero-line {
    flex: 1;
    height: 2px; background: var(--tas-teal);
    max-width: 300px;
}
.tas-hero-heading-inner { text-align: center; }
.tas-hero-top-small {
    display: block; font-size: 20px; font-weight: 700; color: var(--tas-navy);
    margin-bottom: 8px;
}
.tas-hero-title-row {
    display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; justify-content: center;
}
.tas-hero-main {
    font-size: 36px; font-weight: 800; color: var(--tas-teal);
    letter-spacing: -0.02em;
}
.tas-hero-sub {
    font-size: 22px; font-weight: 700; color: var(--tas-navy);
}
.tas-hero-img {
    width: 100%; max-width: 1200px; height: auto;
    border-radius: 34px; object-fit: cover;
}

/* ── Section (F) — intro banner + 3 widgets ── */
.tas-intro-section {
    margin-top: 60px;
    display: flex; flex-direction: column; gap: 40px;
}
.tas-intro-figure { position: relative; }
.tas-intro-img { width: 100%; height: auto; display: block; border-radius: 16px; }
.tas-intro-banner {
    background: var(--tas-teal);
    color: #fff;
    padding: 24px 30px;
    border-radius: 14px;
    margin-top: -25px;
}
.tas-intro-banner-text { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.6; }
.tas-intro-widgets {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    padding: 20px 0 0;
    gap: 24px;
}
.tas-intro-widget {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 45px 20px 20px;
    gap: 20px;
    flex: 1 1 0;
    min-width: 0;
    background: #FFFFFF;
    border: 1px solid #008F8D;
    box-shadow: 2px 3px 0 #008F8D;
    border-radius: 8px;
    isolation: isolate;
}
.tas-intro-widget-img {
    width: 100px;
    height: 80px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    z-index: 0;
}
.tas-intro-widget-img img,
.tas-intro-widget-img svg {
    max-width: 100%;
    max-height: 100%;
    display: block;
}
.tas-intro-widget-title {
    margin: 0;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 32px;
    letter-spacing: -0.02em;
    color: #061C3D;
    text-align: center;
    z-index: 1;
}
.tas-intro-widget-chip {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0 18px;
    gap: 10px;
    height: 48px;
    background: #008F8D;
    border: 1px solid #008F8D;
    border-radius: 120px;
    color: #FFFFFF;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 32px;
    letter-spacing: -0.02em;
    white-space: nowrap;
    box-sizing: border-box;
    z-index: 2;
}
.tas-intro-note {
    text-align: right;
    font-size: 13px; color: var(--tas-body);
    margin: 0;
}

/* ── Section (G) — customer types ── */
/* Full-width bleed: override the shared 1280px grid so the gradient spans the
   whole viewport. Inner title / card list keep their own max-widths. */
.tas-customers-section {
    max-width: none;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 80px;
    padding: 80px 40px;
    background: linear-gradient(180deg, rgba(234, 244, 242, 0) 0%, #EAF4F2 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 80px;
    box-sizing: border-box;
}
.tas-customers-title {
    margin: 0;
    text-align: center;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 36px;
    line-height: 43px;
    letter-spacing: -0.02em;
    color: #008F8D;
    max-width: 900px;
}
.tas-customers-list {
    width: 100%;
    max-width: 1122px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
}
.tas-customer-card {
    display: inline-flex;
    flex-direction: row;
    align-items: stretch;
    align-self: flex-start;
    min-height: 180px;
    max-width: 100%;
    background: #FFFFFF;
    border: 2px solid #008F8D;
    border-radius: 64px;
    box-sizing: border-box;
    overflow: hidden;
}
.tas-customer-card--right {
    align-self: flex-end;
    flex-direction: row-reverse;
}
.tas-customer-heading {
    flex: 0 0 241px;
    box-sizing: border-box;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    padding: 12px 16px;
    margin: -2px;
    background: #008F8D;
    box-shadow: inset 0 4px 40px rgba(0, 0, 0, 0.25);
    border-radius: 64px;
    color: #FFFFFF;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 32px;
    letter-spacing: -0.02em;
    text-align: center;
    white-space: pre-line;
}
.tas-customer-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    padding: 30px 60px 30px 40px;
    margin: 0;
}
.tas-customer-card--right .tas-customer-body {
    padding: 30px 40px 30px 60px;
    align-items: flex-end;
    text-align: right;
}
.tas-customer-line {
    margin: 0;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.02em;
    color: #07133F;
}

/* ── Section (H) — mid-page CTA — reuses .contact-banner from section-contact-cta ── */
/* Full-width bleed so the banner background spans the whole viewport, matching
   the footer CTA on other pages. */
.tas-mid-cta-wrap {
    max-width: none;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 60px;
    margin-bottom: 20px;
    padding: 0;
}
.tas-mid-cta-wrap .contact-banner { border-radius: 0; }

/* ── Section (I) — teal gradient card + solution image ── */
.tas-solution-section { margin-top: 60px; }
.tas-solution-card {
    background: linear-gradient(136deg, #008F8D 0%, #00C7B8 100%);
    border-radius: 40px;
    padding: 60px 80px;
    text-align: center;
    color: #fff;
    display: flex; flex-direction: column; align-items: center; gap: 40px;
}
.tas-solution-heading {
    margin: 0;
    font-size: 30px; font-weight: 800; line-height: 1.5; color: #fff;
}
.tas-solution-img {
    width: 100%; max-width: 980px; height: auto;
    border-radius: 16px;
}

/* ── Section (J) — 3 detail cards (味覚 / 香気 / 成分) ── */
.tas-detail-cards-section {
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.tas-detail-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 20px;
    min-height: 385px;
}
.tas-detail-dot-column {
    flex: 0 0 190px;
    display: flex;
    align-self: stretch;
}
.tas-detail-dot {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 24px;
    background: #008F8D;
    box-shadow: inset 0 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 46px 2px 2px 46px;
    color: #FFFFFF;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 36px;
    line-height: 43px;
    letter-spacing: -0.02em;
    text-align: center;
    box-sizing: border-box;
}
.tas-detail-inner {
    flex: 1 1 auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 24px;
    padding: 14px;
    background: #F9FAFB;
    border: 1px solid rgba(126, 195, 194, 0.7);
    border-radius: 10px;
}
.tas-detail-img-main {
    flex: 1 1 0;
    display: flex;
}
.tas-detail-img-main img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 12px;
}
.tas-detail-right {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
    min-width: 0;
}
.tas-detail-img-overlay {
    flex: 1 1 auto;
    display: flex;
    max-height: 193px;
}
.tas-detail-img-overlay img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 12px;
}
.tas-detail-text {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
}
.tas-detail-header {
    box-sizing: border-box;
    padding: 0 0 10px;
    border-bottom: 3px solid rgba(0, 143, 141, 0.7);
}
.tas-detail-subhead {
    margin: 0;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 31px;
    letter-spacing: -0.02em;
    color: #008F8D;
}
.tas-detail-copy {
    margin: 0;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.02em;
    color: #221816;
}

/* ── Section (K) — 2 pill buttons (350×56, teal, rectangular w/ 8px radius) ── */
.tas-pill-buttons-section {
    margin-top: 40px;
    padding: 20px 0;
}
.tas-pill-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}
.tas-pill-button {
    position: relative;
    box-sizing: border-box;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 350px;
    height: 56px;
    padding: 10px 16px;
    /* Match .tas-related-link: solid teal with a right-side path texture. */
    background-color: #008F8D;
    color: #FFFFFF;
    border-radius: 8px;
    text-decoration: none;
    overflow: hidden;
    transition: filter .2s;
}
.tas-pill-button:hover { filter: brightness(1.06); color: #FFFFFF; }
.tas-pill-button::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 171px;
    height: 56px;
    background: url('../../images/path.png') right bottom / contain no-repeat;
    border-radius: 0 0 8px 0;
    pointer-events: none;
    z-index: 1;
}
.tas-pill-text {
    flex: 1;
    position: relative;
    z-index: 2;
    text-align: center;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 31px;
    letter-spacing: -0.02em;
    color: #FFFFFF;
}
.tas-pill-arrow {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}
.tas-pill-arrow svg { display: block; }

/* ── Section (L) — slogan lines (gradient underline) + summary card ── */
.tas-slogan-section {
    margin-top: 60px;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}
.tas-slogan-lines {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28.79px;
}
.tas-slogan-line {
    margin: 0;
    display: inline-block;
    padding: 0 4px;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 36px;
    line-height: 43px;
    letter-spacing: -0.02em;
    color: #008F8D;
    text-align: center;
    background: linear-gradient(180deg, rgba(126, 195, 194, 0) 45%, rgba(126, 195, 194, 0.3) 45%);
}
.tas-slogan-summary {
    box-sizing: border-box;
    width: 100%;
    max-width: 836px;
    padding: 36px;
    background: #FFFFFF;
    border: 1px solid #008F8D;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.16);
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.tas-slogan-summary-body {
    margin: 0;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 31px;
    letter-spacing: -0.02em;
    color: #07133F;
    text-align: center;
}

/* ── Section (M) — how-to gradient card + 3 numbered widgets ── */
.tas-howto-section { margin-top: 60px; }
.tas-howto-card {
    box-sizing: border-box;
    padding: 60px 40px;
    background: linear-gradient(258.88deg, #00D0CC 0.28%, #008F8D 20.35%, #0B797F 99.72%);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    border-radius: 40px;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
}
.tas-howto-title {
    margin: 0;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 36px;
    line-height: 43px;
    letter-spacing: -0.02em;
    color: #FFFFFF;
    text-align: center;
}
.tas-howto-widgets {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    padding: 20px 0 0;
    gap: 12px;
}
.tas-howto-widget {
    position: relative;
    box-sizing: border-box;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 45px 20px 28px;
    gap: 20px;
    background: #FFFFFF;
    border: 1px solid #008F8D;
    box-shadow: 2px 3px 0 #008F8D;
    border-radius: 8px;
    isolation: isolate;
}
.tas-howto-badge {
    position: absolute;
    top: -40px;
    left: 20px;
    width: 80px;
    height: 80px;
    box-sizing: border-box;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: #008F8D;
    border: 2px solid #FFFFFF;
    border-radius: 120px;
    color: #FFFFFF;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 36px;
    line-height: 32px;
    letter-spacing: -0.02em;
    z-index: 3;
}
.tas-howto-widget-title {
    margin: 0;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 31px;
    letter-spacing: -0.02em;
    color: #008F8D;
    text-align: center;
    z-index: 0;
}
.tas-howto-widget-media {
    width: 230px;
    height: 154px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}
.tas-howto-widget-media img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    width: auto;
    height: auto;
}
.tas-howto-widget-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    z-index: 2;
}
.tas-howto-widget-line {
    margin: 0;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 32px;
    letter-spacing: -0.02em;
    color: #061C3D;
    text-align: center;
}

/* ── Section (N) — example (「納品データの例」) ─────────────────────────
   Full-width gradient bleed (extends into O & P via solid #EAF4F2 backgrounds). */
.tas-example-section {
    max-width: none;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 100px 40px 40px;
    background: linear-gradient(180deg, rgba(234, 244, 242, 0) 0%, #EAF4F2 100%);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}
.tas-example-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    max-width: 900px;
}
.tas-example-title {
    margin: 0;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 36px;
    line-height: 43px;
    letter-spacing: -0.02em;
    color: #008F8D;
    text-align: center;
}
.tas-example-sub {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin: 0;
    text-align: center;
}
.tas-example-sub-line {
    margin: 0;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 31px;
    letter-spacing: -0.02em;
    color: #061C3D;
}
.tas-example-grid {
    width: 100%;
    max-width: 1122px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: stretch;
}
.tas-example-card {
    box-sizing: border-box;
    background: #FFFFFF;
    border: 1px solid #008F8D;
    border-radius: 24px;
    padding: 36px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 14px;
    min-height: 326px;
}
.tas-example-card--image .tas-example-card-img,
.tas-example-card--image img {
    width: 100%;
    max-width: 509px;
    height: auto;
    display: block;
    border-radius: 8px;
}
.tas-example-card--summary { padding: 36px; gap: 36px; }
.tas-example-summary-banner {
    box-sizing: border-box;
    width: 100%;
    padding: 15px;
    background: #008F8D;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.tas-example-summary-line {
    margin: 0;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 31px;
    letter-spacing: -0.02em;
    color: #FFFFFF;
    text-align: center;
}
.tas-example-summary-body {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
}
.tas-example-summary-body-line {
    margin: 0;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.02em;
    color: #221816;
}

/* ── Section (O) — pricing (「価格と納期について」) ────────────────────── */
.tas-pricing-section {
    max-width: none;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 0;
    padding: 0 40px 40px;
    background: #EAF4F2;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}
.tas-pricing-wrap {
    box-sizing: border-box;
    width: 100%;
    max-width: 1122px;
    padding: 60px 40px;
    background: #FFFFFF;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
}
.tas-pricing-title {
    margin: 0;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 36px;
    line-height: 43px;
    letter-spacing: -0.02em;
    color: #008F8D;
    text-align: center;
}
.tas-pricing-cards {
    width: 100%;
    max-width: 1026px;
    display: flex;
    flex-direction: row;
    gap: 24px;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
}
.tas-pricing-card {
    position: relative;
    box-sizing: border-box;
    flex: 1 1 0;
    min-width: 320px;
    max-width: 501px;
    min-height: 233px;
    padding: 30px;
    background: #FFFFFF;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 17px;
}
.tas-pricing-card--light { border: 2px solid #00D0CC; }
.tas-pricing-card--dark  { border: 2px solid #008F8D; }
/* Circular arc decoration at top-left corner */
.tas-pricing-card-arc {
    position: absolute;
    width: 400px;
    height: 400px;
    left: -200px;
    top: -200px;
    border-radius: 50%;
    z-index: 0;
}
.tas-pricing-card--light .tas-pricing-card-arc { background: #00D0CC; }
.tas-pricing-card--dark  .tas-pricing-card-arc { background: #008F8D; }
/* Service label sits inside the arc, upper-left area */
.tas-pricing-card-label {
    position: absolute;
    left: 40px;
    top: 60px;
    margin: 0;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 31px;
    letter-spacing: -0.02em;
    color: #FFFFFF;
    z-index: 1;
    text-align: right;
}
.tas-pricing-card-price-block {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    width: 100%;
}
.tas-pricing-card-price {
    margin: 0;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 36px;
    line-height: 43px;
    letter-spacing: -0.02em;
    color: #008F8D;
    text-align: right;
}
.tas-pricing-card-term {
    margin: 0;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 32px;
    letter-spacing: -0.02em;
    color: #000000;
    text-align: right;
}
.tas-pricing-card-add {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    width: 100%;
}
.tas-pricing-add-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}
.tas-pricing-add-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 132px;
    height: 44px;
    padding: 8px 16px;
    background: #008F8D;
    border-radius: 8px;
    color: #FFFFFF;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.02em;
    text-align: center;
}
.tas-pricing-add-price {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.02em;
    color: #000000;
    text-align: right;
}
.tas-pricing-card-note {
    margin: 0;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    color: #000000;
    text-align: right;
}
.tas-pricing-notes {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 1042px;
    width: 100%;
}
.tas-pricing-note {
    margin: 0;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 32px;
    letter-spacing: -0.02em;
    color: #000000;
}
.tas-pricing-note::before { content: none; }

/* ── Shared FAQ accordion styles (mirror .sn-faq-section from EAP page) ──
   Copied verbatim so pages that don't enqueue page-employer-action-plan.css
   still render the same accordion pattern. Page-specific overrides live
   below under .tas-faq-wrap / .tas-caution-wrap. */
.sn-faq-section {
    background: #ffffff;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
    border-radius: 28px;
    padding: 50px 24px;
    margin-bottom: 3rem;
}
.sn-faq-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 29px;
}
.sn-faq-title {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -0.02em;
    color: #061C3D;
}
.sn-faq-list {
    display: flex;
    flex-direction: column;
    gap: 26px;
}
.sn-faq-item {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}
.sn-faq-q {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 20px 90px;
    min-height: 76px;
    background: #ffffff;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    text-align: left;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.012em;
    color: #061C3D;
    transition: background .2s, color .2s, border-radius .2s, min-height .2s;
}
/* Figma-accurate chip: fixed 70×64 rectangle at top-left of item, flag-shape
   notched via border-radius 16 / 0 / 26 / 0. NOT stretched to item height. */
.sn-faq-q-badge {
    position: absolute;
    left: -1px;
    top: -1px;
    width: 70px;
    height: 64px;
    box-sizing: border-box;
    padding: 9px 10px;
    background: #008F8D;
    border-radius: 16px 0 26px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 900;
    font-size: 30px;
    line-height: 31px;
    text-align: center;
    color: #ffffff;
    border: 1px solid transparent;
    transition: none;
}
.sn-faq-q-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sn-faq-q-icon svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    transition: transform .3s ease, opacity .2s ease;
}
.sn-faq-item.open .sn-faq-q {
    background: #008F8D;
    color: #ffffff;
    border-radius: 16px 16px 0 0;
    min-height: 80px;
}
.sn-faq-item.open .sn-faq-q-badge {
    background: #ffffff;
    border-color: #CCCCCC;
    color: #008F8D;
    /* height stays 64px (Figma-fixed) — no override */
}
.sn-faq-q-icon .icon-plus  { opacity: 1; transform: rotate(0deg); }
.sn-faq-q-icon .icon-minus { opacity: 0; transform: rotate(-90deg); }
.sn-faq-item.open .sn-faq-q-icon .icon-plus  { opacity: 0; transform: rotate(90deg); }
.sn-faq-item.open .sn-faq-q-icon .icon-minus { opacity: 1; transform: rotate(0deg); }
/* CLOSED items — Figma add-circle-fill: solid teal disc + white plus stroke */
.sn-faq-item:not(.open) .sn-faq-q-icon .icon-plus circle { fill: #008F8D; }
.sn-faq-item:not(.open) .sn-faq-q-icon .icon-plus path   { stroke: #FFFFFF; }
/* OPEN item — Figma indeterminate-circle-fill: white disc + teal minus stroke
   (already the SVG default; explicit for clarity) */
.sn-faq-item.open .sn-faq-q-icon .icon-minus circle { fill: #FFFFFF; }
.sn-faq-item.open .sn-faq-q-icon .icon-minus path   { stroke: #008F8D; }
.sn-faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .2s ease;
    background: #ffffff;
    border: 1px solid #CCCCCC;
    border-top: none;
    border-radius: 0 0 16px 16px;
}
.sn-faq-item.open .sn-faq-a { max-height: 500px; }
.sn-faq-a-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 31px;
    padding: 20px;
}
.sn-faq-a-badge {
    flex-shrink: 0;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 900;
    font-size: 30px;
    line-height: 31px;
    color: #FE7F00;
}
.sn-faq-a-text {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.012em;
    color: #061C3D;
    margin: 0;
}

/* ── Section (P) — FAQ (page-specific overrides on the shared pattern) ──
   Container becomes full-width pale-teal band; the .sn-faq-section card
   look (white bg + shadow + radius) is neutralized here so items sit
   directly on the gradient. Title turns teal + centered per Figma. */
.tas-faq-wrap {
    max-width: none;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 0;
    margin-bottom: 0 !important;
    padding: 40px 40px 60px !important;
    background: #EAF4F2 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 34px;
}
.tas-faq-wrap > .sn-faq-head,
.tas-faq-wrap > .sn-faq-list {
    width: 100%;
    max-width: 1122px;
}
.tas-faq-wrap .sn-faq-head {
    justify-content: center;
    margin-bottom: 0;
}
.tas-faq-wrap .sn-faq-title {
    color: #008F8D;
    font-size: 36px;
    line-height: 43px;
    text-align: center;
}

/* ── Section (Q) — caution (same accordion pattern as FAQ) ──────────────
   Only overrides the chip / icon color from teal-dark → teal-light per Figma
   (「N」 label instead of Q → uses tas-caution-item class from render). */
.tas-caution-wrap {
    max-width: none;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 0;
    margin-bottom: 0 !important;
    padding: 0 40px 60px !important;
    background: #EAF4F2 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 34px;
}
.tas-caution-wrap > .sn-faq-head,
.tas-caution-wrap > .sn-faq-list {
    width: 100%;
    max-width: 1122px;
}
.tas-caution-wrap .sn-faq-head {
    justify-content: center;
    margin-bottom: 0;
}
.tas-caution-wrap .sn-faq-title {
    color: #008F8D;
    font-size: 36px;
    line-height: 43px;
    text-align: center;
}
/* N chip = teal-light instead of teal-dark */
.tas-caution-wrap .sn-faq-q-badge { background: #00D0CC; }
.tas-caution-wrap .sn-faq-item.open .sn-faq-q { background: #00D0CC; }
.tas-caution-wrap .sn-faq-item.open .sn-faq-q-badge { color: #00D0CC; }
/* Closed caution items — teal-LIGHT filled disc + white plus (mirrors FAQ but lighter) */
.tas-caution-wrap .sn-faq-item:not(.open) .sn-faq-q-icon .icon-plus circle { fill: #00D0CC; }
.tas-caution-wrap .sn-faq-item:not(.open) .sn-faq-q-icon .icon-plus path   { stroke: #FFFFFF; }
/* Open caution items — white disc + teal-light minus */
.tas-caution-wrap .sn-faq-item.open .sn-faq-q-icon .icon-minus circle { fill: #FFFFFF; }
.tas-caution-wrap .sn-faq-item.open .sn-faq-q-icon .icon-minus path   { stroke: #00D0CC; }

/* ── Section (R) — flow (「ご依頼の流れ」full-width mint-fade band) ────── */
.tas-flow-section {
    max-width: none;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 0;
    padding: 60px 80px;
    background: linear-gradient(180deg, rgba(180, 235, 234, 0) 0%, rgba(180, 235, 234, 0.8) 100%);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    border-radius: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    text-align: center;
}
.tas-flow-title {
    margin: 0;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 36px;
    line-height: 43px;
    letter-spacing: -0.02em;
    color: #008F8D;
    text-align: center;
}
.tas-flow-img {
    width: 100%;
    max-width: 980px;
    height: auto;
    display: block;
}

/* ── Section (S) — related links (「関連情報」— 3 gradient buttons) ────── */
.tas-related-section {
    max-width: none;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 0;
    padding: 60px 42px 70px;
    background: transparent;
    border-radius: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 34px;
}
.tas-related-title {
    margin: 0;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 36px;
    line-height: 43px;
    letter-spacing: -0.02em;
    color: #008F8D;
    text-align: center;
}
.tas-related-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    width: 100%;
    max-width: 960px;
}
.tas-related-item {
    width: 100%;
    display: flex;
}
.tas-related-link {
    position: relative;
    box-sizing: border-box;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    height: 56px;
    padding: 10px 16px;
    background: #008F8D;
    color: #FFFFFF;
    border-radius: 8px;
    text-decoration: none;
    overflow: hidden;
}
.tas-related-link:hover { color: #FFFFFF; }
/* Decorative path_v2.png — anchored bottom-right at native 224×56 so the
   pattern is never clipped when the button grows tall from text wrap; the
   extra space above stays as plain teal button bg. */
.tas-related-link::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 224px;
    height: 56px;
    background: url('../../images/path_v2.png') right bottom / contain no-repeat;
    border-radius: 0 0 8px 0;
    pointer-events: none;
    z-index: 1;
}
/* Keep text + arrow above the decorative overlay */
.tas-related-text,
.tas-related-arrow {
    position: relative;
    z-index: 2;
}
.tas-related-text {
    flex: 1;
    text-align: left;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 31px;
    letter-spacing: -0.02em;
    color: #FFFFFF;
}
.tas-related-arrow {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.tas-related-arrow img { display: block; }

/* ── Responsive ── */
/* ═════════════════════════════════════════════════════════════════════════
   MOBILE / TABLET RESPONSIVE
   Breakpoints:
     1100px — tablet landscape: stack multi-column grids
     991px  — tablet portrait:  reduce section side paddings
     768px  — small tablet / large phone: shrink fonts, tighten cards
     480px  — small phone:      max compression, small Q chip, tiny paddings
   ═════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
    .tas-howto-widgets { flex-direction: column; padding-top: 40px; gap: 60px; }
    .tas-howto-widget { flex: 1 1 auto; }
    .tas-example-grid { grid-template-columns: 1fr; }
    .tas-pricing-cards { flex-direction: column; align-items: stretch; }
    .tas-pricing-card { max-width: 100%; min-width: 0; }
    .tas-detail-card { flex-direction: column; }
    .tas-detail-dot-column { flex: 0 0 auto; }
    .tas-detail-dot { border-radius: 46px 46px 2px 2px; padding: 20px; font-size: 28px; line-height: 34px; }
    .tas-detail-inner { flex-direction: column; padding: 12px; }
    .tas-detail-img-main img { max-height: 260px; }
    .tas-intro-widgets { flex-direction: column; }
    .tas-intro-widget { flex: 1 1 auto; }
    .tas-customer-card { align-self: stretch; flex-direction: column; border-radius: 32px; }
    .tas-customer-card--right { flex-direction: column; text-align: left; }
    .tas-customer-card--right .tas-customer-body { align-items: flex-start; text-align: left; padding: 24px 32px; }
    .tas-customer-heading { flex: 0 0 auto; padding: 24px; border-radius: 32px 32px 0 0; margin: -2px -2px 0; }
    .tas-customer-body { padding: 24px 32px; }
}

@media (max-width: 991px) {
    /* Uniform 20px side padding for all section wrappers */
    .tas-title-band-wrap,
    .sn-breadcrumb-wrap,
    .tas-hero-section,
    .tas-intro-section,
    .tas-mid-cta-wrap,
    .tas-detail-cards-section,
    .tas-pill-buttons-section,
    .tas-slogan-section,
    .tas-howto-section {
        padding-left: 20px; padding-right: 20px;
    }
    .tas-customers-section,
    .tas-solution-section,
    .tas-example-section,
    .tas-pricing-section,
    .tas-faq-wrap,
    .tas-caution-wrap,
    .tas-flow-section,
    .tas-related-section {
        padding-left: 20px !important; padding-right: 20px !important;
    }
    /* Uniform reduced top margins across sections */
    .tas-title-band-wrap { margin-top: 16px; }
    .tas-hero-section { margin-top: 32px; }
    .tas-intro-section { margin-top: 40px; }
    .tas-mid-cta-wrap { margin-top: 40px; }
    .tas-solution-section { margin-top: 40px; }
    .tas-detail-cards-section { margin-top: 40px; }
    .tas-pill-buttons-section { margin-top: 24px; }
    .tas-slogan-section { margin-top: 40px; }
    .tas-howto-section { margin-top: 40px; }
    /* Section G — trim big gaps + smaller top margin */
    .tas-customers-section { margin-top: 40px; padding-top: 60px; padding-bottom: 60px; gap: 48px; }
    /* Section I — smaller gradient card */
    .tas-solution-card { padding: 40px 24px; gap: 32px; }
    .tas-solution-heading { font-size: 24px; }
    /* Section M — smaller how-to card */
    .tas-howto-card { padding: 40px 16px; gap: 40px; }
    /* Section N — smaller example */
    .tas-example-section { padding-top: 48px; padding-bottom: 32px; gap: 32px; }
    .tas-example-card { padding: 24px 16px; min-height: 0; }
    .tas-example-card--summary { padding: 24px; gap: 24px; }
    /* Section O — pricing inner wrapper */
    .tas-pricing-wrap { padding: 40px 24px; gap: 40px; }
    /* Section P/Q — FAQ / caution */
    .tas-faq-wrap { padding-top: 32px !important; padding-bottom: 40px !important; gap: 24px; }
    .tas-caution-wrap { padding-bottom: 40px !important; gap: 24px; }
    /* Section R — flow */
    .tas-flow-section { padding-top: 40px; padding-bottom: 40px; gap: 32px; }
    /* Section S — related */
    .tas-related-section { padding: 40px 20px 48px; gap: 24px; }
}

@media (max-width: 768px) {
    /* Uniform tight top margins on small tablet / large phone */
    .tas-title-band-wrap { margin-top: 12px; }
    .tas-hero-section { margin-top: 24px; }
    .tas-intro-section { margin-top: 24px; }
    .tas-mid-cta-wrap { margin-top: 24px; }
    .tas-solution-section { margin-top: 24px; }
    .tas-detail-cards-section { margin-top: 24px; }
    .tas-pill-buttons-section { margin-top: 16px; }
    .tas-slogan-section { margin-top: 24px; }
    .tas-howto-section { margin-top: 24px; }

    /* Title band */
    .tas-title-band { font-size: 20px; padding: 14px 32px 14px 20px; }

    /* Section D — hero heading */
    .tas-hero-section { margin-top: 32px; gap: 16px; }
    .tas-hero-line { max-width: 40px; }
    .tas-hero-top-small { font-size: 16px; margin-bottom: 4px; }
    .tas-hero-main { font-size: 26px; }
    .tas-hero-sub { font-size: 15px; }
    .tas-hero-img { border-radius: 20px; }

    /* Section F — intro */
    .tas-intro-section { margin-top: 40px; gap: 24px; }
    .tas-intro-banner { padding: 16px 20px; }
    .tas-intro-banner-text { font-size: 16px; line-height: 1.55; }
    .tas-intro-widgets { padding-top: 32px; gap: 40px; }
    .tas-intro-widget { padding: 40px 16px 16px; }
    .tas-intro-widget-title { font-size: 18px; line-height: 28px; }
    .tas-intro-widget-chip { height: 40px; font-size: 16px; line-height: 24px; top: -16px; padding: 0 14px; }

    /* Section G — customers */
    .tas-customers-section { margin-top: 24px; padding-top: 40px; padding-bottom: 40px; gap: 32px; }
    .tas-customers-title { font-size: 20px; line-height: 30px; }
    .tas-customers-list { gap: 24px; }
    .tas-customer-heading { font-size: 16px; line-height: 24px; padding: 16px; }
    .tas-customer-line { font-size: 14px; line-height: 22px; }
    .tas-customer-body { padding: 20px 20px; gap: 12px; }
    .tas-customer-card--right .tas-customer-body { padding: 20px 20px; }

    /* Section I — solution */
    .tas-solution-card { padding: 32px 20px; gap: 24px; border-radius: 24px; }
    .tas-solution-heading { font-size: 20px; line-height: 30px; }
    .tas-solution-img { border-radius: 12px; }

    /* Section J — detail cards */
    .tas-detail-dot { font-size: 22px; line-height: 28px; padding: 14px; }
    .tas-detail-subhead { font-size: 20px; line-height: 26px; }
    .tas-detail-copy { font-size: 14px; line-height: 22px; }
    .tas-detail-right { gap: 16px; }
    .tas-detail-img-main img { max-height: 220px; }

    /* Section K — pill buttons */
    .tas-pill-buttons { flex-direction: column; gap: 16px; }
    .tas-pill-button { width: 100%; max-width: 350px; height: 52px; }
    .tas-pill-text { font-size: 20px; line-height: 28px; }
    .tas-pill-arrow, .tas-pill-arrow img { width: 32px; height: 32px; }

    /* Section L — slogan */
    .tas-slogan-section { margin-top: 40px; gap: 24px; }
    .tas-slogan-line { font-size: 20px; line-height: 30px; }
    .tas-slogan-summary { padding: 20px; }
    .tas-slogan-summary-body { font-size: 16px; line-height: 24px; }

    /* Section M — how-to */
    .tas-howto-card { padding: 32px 16px; gap: 32px; }
    .tas-howto-title { font-size: 24px; line-height: 32px; }
    .tas-howto-widget { padding: 40px 16px 20px; }
    .tas-howto-badge { width: 60px; height: 60px; font-size: 28px; top: -30px; }
    .tas-howto-widget-title { font-size: 20px; line-height: 28px; }
    .tas-howto-widget-body { font-size: 14px; line-height: 22px; }
    .tas-howto-widget-media { width: 200px; height: 130px; }

    /* Section N — example */
    .tas-example-title { font-size: 24px; line-height: 32px; }
    .tas-example-sub-line { font-size: 16px; line-height: 24px; }
    .tas-example-card { padding: 20px 16px; }
    .tas-example-card--summary { padding: 20px; gap: 20px; }
    .tas-example-summary-banner { padding: 12px; }
    .tas-example-summary-line { font-size: 18px; line-height: 26px; }
    .tas-example-summary-body-line { font-size: 14px; line-height: 22px; }

    /* Section O — pricing (keeps desktop visual: arc + absolute label + right-align) */
    .tas-pricing-wrap { padding: 32px 20px; gap: 32px; border-radius: 16px; }
    .tas-pricing-title { font-size: 24px; line-height: 32px; }
    .tas-pricing-card {
        padding: 20px 20px 20px 20px;
        padding-top: 80px;          /* reserve room for absolute arc + label */
        min-height: 200px;          /* prevent collapse */
        min-width: 0;
        gap: 12px;
        align-items: flex-end;      /* same as desktop — content right-aligned */
        overflow: hidden;           /* clip arc corner */
    }
    /* Arc — sized to fully cover the label chip (curve radius must exceed the
       label's farthest corner from (0,0) or label will spill onto white bg). */
    .tas-pricing-card-arc {
        width: 260px;
        height: 260px;
        left: -130px;
        top: -130px;
    }
    /* Label — remains absolute over arc, sized to fit inside the visible arc quadrant */
    .tas-pricing-card-label {
        top: 22px;
        left: 18px;
        font-size: 20px;
        line-height: 26px;
    }
    .tas-pricing-card-price { font-size: 26px; line-height: 32px; }
    .tas-pricing-card-term { font-size: 15px; line-height: 22px; }
    .tas-pricing-add-row { flex-wrap: wrap; }
    .tas-pricing-add-chip { width: 108px; height: 40px; font-size: 16px; line-height: 24px; }
    .tas-pricing-add-price { font-size: 14px; line-height: 20px; }
    .tas-pricing-note { font-size: 15px; line-height: 24px; }

    /* Section P — FAQ (shrink Q chip so text still fits on narrow items) */
    .tas-faq-wrap .sn-faq-title { font-size: 24px; line-height: 32px; }
    .sn-faq-q-badge { width: 56px; height: 52px; font-size: 24px; line-height: 28px; padding: 6px; }
    .sn-faq-q { padding: 16px 16px 16px 68px; min-height: 68px; font-size: 15px; }
    .sn-faq-item.open .sn-faq-q { min-height: 72px; }
    .sn-faq-a-inner { gap: 16px; padding: 16px; }
    .sn-faq-a-badge { font-size: 24px; line-height: 28px; }
    .sn-faq-a-text { font-size: 15px; line-height: 22px; }
    .sn-faq-q-icon { width: 28px; height: 28px; }
    .sn-faq-q-icon svg { width: 28px; height: 28px; }

    /* Section Q — caution */
    .tas-caution-wrap .sn-faq-title { font-size: 24px; line-height: 32px; }

    /* Section R — flow */
    .tas-flow-section { padding: 32px 20px; gap: 24px; }
    .tas-flow-title { font-size: 24px; line-height: 32px; }

    /* Section S — related */
    .tas-related-section { padding: 40px 20px 48px; gap: 24px; }
    .tas-related-title { font-size: 24px; line-height: 32px; }
    .tas-related-text { font-size: 16px; line-height: 22px; }
    .tas-related-link { padding: 10px 12px; height: auto; min-height: 56px; }
    .tas-related-arrow, .tas-related-arrow img { width: 32px; height: 32px; }
    /* Mobile: stretch path_v2 across the full button (both width AND height)
       so the whole pattern fills the button. */
    .tas-related-link::after {
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: auto;
        height: auto;
        background: url('../../images/path_v2.png') center / 100% 100% no-repeat;
        border-radius: 8px;
    }
}

@media (max-width: 480px) {
    /* Uniform 16px side padding on all sections */
    .tas-title-band-wrap,
    .sn-breadcrumb-wrap,
    .tas-hero-section,
    .tas-intro-section,
    .tas-mid-cta-wrap,
    .tas-detail-cards-section,
    .tas-pill-buttons-section,
    .tas-slogan-section,
    .tas-howto-section {
        padding-left: 16px; padding-right: 16px;
    }
    .tas-customers-section,
    .tas-solution-section,
    .tas-example-section,
    .tas-pricing-section,
    .tas-faq-wrap,
    .tas-caution-wrap,
    .tas-flow-section,
    .tas-related-section {
        padding-left: 16px !important; padding-right: 16px !important;
    }

    /* Maximum compression on small phone */
    .tas-title-band-wrap { margin-top: 8px; }
    .tas-hero-section { margin-top: 16px; }
    .tas-intro-section,
    .tas-mid-cta-wrap,
    .tas-solution-section,
    .tas-detail-cards-section,
    .tas-slogan-section,
    .tas-howto-section { margin-top: 16px; }
    .tas-pill-buttons-section { margin-top: 12px; }

    .tas-hero-main { font-size: 22px; }
    .tas-hero-title-row { gap: 6px; }
    .tas-customers-section,
    .tas-example-section {
        padding-top: 32px !important; padding-bottom: 32px !important;
    }
    .tas-customers-section { margin-top: 16px; gap: 24px; }
    .tas-customers-list { gap: 20px; }
    .tas-customer-heading { padding: 14px; font-size: 15px; }
    .tas-customer-body { padding: 16px; }
    .tas-detail-inner { padding: 8px; gap: 12px; }
    .tas-solution-card { padding: 24px 16px; }
    .tas-howto-card { padding: 24px 12px; gap: 24px; }
    .tas-howto-widget-media { width: 160px; height: 106px; }
    .tas-pricing-wrap { padding: 24px 16px; }
    .tas-pricing-card {
        padding: 16px;
        padding-top: 70px;
        gap: 10px;
        min-height: 180px;
        min-width: 0;
    }
    .tas-pricing-card-arc { width: 220px; height: 220px; left: -110px; top: -110px; }
    .tas-pricing-card-label {
        top: 18px;
        left: 16px;
        font-size: 18px;
        line-height: 24px;
    }
    .tas-pricing-card-price { font-size: 22px; line-height: 28px; }
    .tas-pricing-card-term { font-size: 14px; line-height: 20px; }
    .tas-pricing-add-chip { width: 96px; height: 36px; font-size: 14px; line-height: 20px; padding: 6px 12px; }
    .tas-pricing-add-price { font-size: 13px; }
    .tas-pricing-card-note { font-size: 12px; line-height: 18px; }
    /* Even smaller Q chip on tiny screens */
    .sn-faq-q-badge { width: 48px; height: 46px; font-size: 20px; line-height: 24px; }
    .sn-faq-q { padding: 14px 12px 14px 60px; min-height: 60px; font-size: 14px; }
    .sn-faq-item.open .sn-faq-q { min-height: 60px; }
    .sn-faq-a-inner { padding: 14px; gap: 12px; }
    .sn-faq-a-badge { font-size: 20px; line-height: 24px; }
    .sn-faq-a-text { font-size: 14px; line-height: 22px; }
    /* Small phone — keep pseudo full-cover (top:0 bottom:0 inherited from 768) */
}