/*
 * TSUKIGIME Design Kit 2.1.0
 * Restrained, non-destructive visual layer for Cocoon.
 */
:root {
    --tdk-navy: #0b2436;
    --tdk-blue: #1477a9;
    --tdk-yellow: #f5c400;
    --tdk-paper: #f5f7f8;
    --tdk-ink: #182a38;
    --tdk-muted: #687985;
    --tdk-line: #dfe5e8;
    --tdk-soft-blue: #f4f9fc;
    --tdk-white: #ffffff;
    --tdk-wrap: 1120px;
    --tdk-radius: 11px;
}

body.tdk-design-active {
    color: var(--tdk-ink);
    background: var(--tdk-paper);
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Noto Sans JP", "Segoe UI", sans-serif;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.tdk-design-active *,
.tdk-design-active *::before,
.tdk-design-active *::after {
    box-sizing: border-box;
}

.tdk-wrap {
    width: min(calc(100% - 48px), var(--tdk-wrap));
    margin-right: auto;
    margin-left: auto;
}

/* Header: one quiet brand row and an optional compact navigation row. */
.tdk-design-active #header-container {
    position: relative;
    z-index: 30;
    color: var(--tdk-ink);
    background: var(--tdk-white);
    border-top: 4px solid var(--tdk-yellow);
    border-bottom: 1px solid #e6ebee;
    box-shadow: none;
}

.tdk-design-active #header-container-in,
.tdk-design-active #header,
.tdk-design-active .header-in {
    background: transparent;
}

.tdk-design-active .header-in {
    width: min(calc(100% - 48px), var(--tdk-wrap));
    min-height: 76px;
    margin: 0 auto;
    padding: 10px 0;
}

.tdk-design-active .logo-header {
    margin: 0;
    line-height: 1.15;
}

.tdk-design-active .logo-header a,
.tdk-design-active .logo-header a:visited {
    color: var(--tdk-navy);
    font-size: 28px;
    font-size: clamp(21px, 2vw, 28px);
    font-weight: 900;
    letter-spacing: -0.045em;
    text-decoration: none;
    white-space: nowrap;
}

.tdk-design-active .logo-header a::after {
    content: "BIKE SELLING MEDIA";
    display: block;
    margin-top: 6px;
    color: var(--tdk-blue);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 0.22em;
}

.tdk-design-active .tagline {
    color: var(--tdk-muted);
    font-size: 11px;
}

.tdk-design-active #navi,
.tdk-design-active .navi,
.tdk-design-active .navi-in,
.tdk-design-active .navi-in > ul {
    background: var(--tdk-white);
}

.tdk-design-active #navi {
    border-top: 1px solid #edf0f2;
}

.tdk-design-active .navi-in > ul {
    width: min(calc(100% - 48px), var(--tdk-wrap));
    margin: 0 auto;
    justify-content: flex-end;
}

.tdk-design-active .navi-in > ul > li {
    border: 0;
}

.tdk-design-active .navi-in a,
.tdk-design-active .navi-in a:visited {
    position: relative;
    min-height: 46px;
    padding: 0 18px;
    color: #314757;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.025em;
    transition: color 0.18s ease;
}

.tdk-design-active .navi-in a:hover,
.tdk-design-active .navi-in .current-menu-item > a,
.tdk-design-active .navi-in .current-menu-ancestor > a {
    color: var(--tdk-blue);
    background: transparent;
}

.tdk-design-active .navi-in .current-menu-item > a::after,
.tdk-design-active .navi-in .current-menu-ancestor > a::after {
    content: "";
    position: absolute;
    right: 18px;
    bottom: 7px;
    left: 18px;
    height: 3px;
    background: var(--tdk-yellow);
    border-radius: 999px;
}

.tdk-design-active .sub-menu {
    background: #fff;
    border: 1px solid var(--tdk-line);
    border-top: 3px solid var(--tdk-yellow);
    box-shadow: 0 14px 32px rgba(11, 36, 54, 0.1);
}

.tdk-design-active .sub-menu a,
.tdk-design-active .sub-menu a:visited {
    color: var(--tdk-ink);
}

.tdk-design-active.tdk-nav-is-empty #navi,
.tdk-design-active.tdk-nav-is-empty .navi {
    display: none !important;
}

/* Hero: retained direction, reduced height and decoration. */
.tdk-hero {
    position: relative;
    z-index: 1;
    overflow: hidden;
    margin: 0;
    color: #fff;
    background: linear-gradient(128deg, #081c2a 0%, var(--tdk-navy) 62%, #0b3d57 100%);
    opacity: 0;
    transition: opacity 0.28s ease;
}

.tdk-hero.is-mounted {
    opacity: 1;
}

.tdk-hero__yellow {
    position: absolute;
    top: -240px;
    right: -150px;
    width: 660px;
    height: 880px;
    background: var(--tdk-yellow);
    transform: rotate(13deg);
}

.tdk-hero__word {
    position: absolute;
    right: -18px;
    bottom: -83px;
    color: rgba(255, 255, 255, 0.045);
    font-size: 210px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.07em;
    pointer-events: none;
}

.tdk-hero__main {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
    align-items: center;
    min-height: 500px;
}

.tdk-hero__copy {
    position: relative;
    z-index: 3;
    max-width: 640px;
    padding: 60px 0 62px;
}

.tdk-hero__brand-row {
    display: none;
}

.tdk-hero__brand-mark {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    color: var(--tdk-yellow);
}

.tdk-hero__brand-mark svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tdk-hero__kicker,
.tdk-section-kicker {
    margin: 0 0 17px;
    color: var(--tdk-yellow);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.18em;
}

.tdk-hero__kicker {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tdk-hero__kicker::before {
    content: "";
    width: 38px;
    height: 3px;
    background: currentColor;
}

.tdk-hero__title {
    max-width: 610px;
    margin: 0;
    color: #fff;
    font-size: 58px;
    font-size: clamp(40px, 4.25vw, 58px);
    font-weight: 900;
    line-height: 1.22;
    letter-spacing: -0.055em;
    text-wrap: balance;
}

.tdk-hero__description {
    max-width: 610px;
    margin: 24px 0 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.9;
}

.tdk-hero__button,
.tdk-hero__button:visited {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 36px;
    min-width: 218px;
    margin-top: 31px;
    padding: 15px 20px 15px 23px;
    color: var(--tdk-navy);
    background: var(--tdk-yellow);
    border: 1px solid var(--tdk-yellow);
    border-radius: 5px;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
    transition: background 0.18s ease, transform 0.18s ease;
}

.tdk-hero__button:hover {
    color: var(--tdk-navy);
    background: #fff;
    transform: translateY(-2px);
}

.tdk-hero__button svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tdk-hero__visual {
    position: relative;
    min-height: 350px;
}

.tdk-bike {
    position: absolute;
    top: 38px;
    right: -55px;
    width: 590px;
    overflow: visible;
    filter: drop-shadow(0 24px 22px rgba(0, 0, 0, 0.2));
}

.tdk-bike__wheel {
    fill: rgba(5, 23, 35, 0.9);
    stroke: #bce5fa;
    stroke: url(#tdk-bike-gradient-v2);
    stroke-width: 9;
}

.tdk-bike__hub {
    fill: var(--tdk-yellow);
    stroke: #fff;
    stroke-width: 5;
}

.tdk-bike__line {
    fill: none;
    stroke: #bce5fa;
    stroke: url(#tdk-bike-gradient-v2);
    stroke-width: 12;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tdk-bike__body {
    fill: var(--tdk-blue);
    stroke: #fff;
    stroke-width: 7;
    stroke-linejoin: round;
}

.tdk-bike__seat {
    fill: #081c2a;
    stroke: #fff;
    stroke-width: 6;
    stroke-linejoin: round;
}

.tdk-hero__points {
    position: relative;
    z-index: 3;
    background: rgba(3, 16, 26, 0.28);
    border-top: 1px solid rgba(255, 255, 255, 0.11);
}

.tdk-hero__points-inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.tdk-hero-point {
    display: flex;
    align-items: center;
    gap: 15px;
    min-height: 72px;
    padding: 0 26px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.tdk-hero-point:last-child {
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.tdk-hero-point b {
    color: var(--tdk-yellow);
    font-size: 11px;
    letter-spacing: 0.1em;
}

/* Custom home page. The original Cocoon content is hidden only after mount. */
body.tdk-home-mounted #content {
    display: none !important;
}

.tdk-home {
    display: block;
    color: var(--tdk-ink);
    background: #fff;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.tdk-home.is-mounted {
    opacity: 1;
}

.tdk-home-section {
    padding: 76px 0 82px;
}

.tdk-home-start,
.tdk-home-purpose {
    background: #fff;
}

.tdk-home-latest {
    background: var(--tdk-paper);
}

.tdk-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 44px;
    margin-bottom: 31px;
}

.tdk-section-heading--single {
    display: block;
}

.tdk-section-heading .tdk-section-kicker {
    margin-bottom: 7px;
    color: var(--tdk-blue);
}

.tdk-section-heading h2 {
    margin: 0;
    color: var(--tdk-navy);
    font-size: 34px;
    font-size: clamp(27px, 3vw, 34px);
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: -0.04em;
}

.tdk-section-heading > p {
    max-width: 500px;
    margin: 0;
    color: var(--tdk-muted);
    font-size: 13px;
    line-height: 1.85;
}

.tdk-guide-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.tdk-guide-card {
    position: relative;
    min-height: 210px;
    margin: 0;
    padding: 29px 28px 26px;
    background: #fff;
    border: 1px solid var(--tdk-line);
    border-radius: var(--tdk-radius);
}

.tdk-guide-card--primary {
    background: var(--tdk-soft-blue);
    border-color: #c9dce7;
}

.tdk-guide-card__num {
    display: block;
    margin-bottom: 24px;
    color: var(--tdk-blue);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.16em;
}

.tdk-guide-card h3 {
    margin: 0 0 10px;
    color: var(--tdk-navy);
    font-size: 20px;
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: -0.025em;
}

.tdk-guide-card p {
    margin: 0;
    color: var(--tdk-muted);
    font-size: 12.5px;
    line-height: 1.8;
}

.tdk-latest-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.tdk-latest-card {
    overflow: hidden;
    margin: 0;
    background: #fff;
    border: 1px solid #e1e6e9;
    border-radius: var(--tdk-radius);
    transition: transform 0.18s ease, border-color 0.18s ease;
}

.tdk-latest-card:hover {
    border-color: #b9ccd7;
    transform: translateY(-3px);
}

.tdk-latest-card__link,
.tdk-latest-card__link:visited {
    display: block;
    color: inherit;
    text-decoration: none;
}

.tdk-latest-card__thumb {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 190px;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(145deg, var(--tdk-navy), var(--tdk-blue));
}

.tdk-latest-card__thumb--1 {
    color: var(--tdk-navy);
    background: linear-gradient(145deg, #efbe00, #ffda35);
}

.tdk-latest-card__thumb--2 {
    color: var(--tdk-navy);
    background: linear-gradient(145deg, #dfe6ea, #bcc8cf);
}

.tdk-latest-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.28s ease;
}

.tdk-latest-card:hover .tdk-latest-card__thumb img {
    transform: scale(1.025);
}

.tdk-latest-card__label {
    position: absolute;
    z-index: 2;
    top: 13px;
    left: 13px;
    max-width: calc(100% - 26px);
    padding: 5px 9px;
    overflow: hidden;
    color: var(--tdk-navy);
    background: rgba(255, 255, 255, 0.94);
    border-radius: 3px;
    font-size: 9px;
    font-weight: 900;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tdk-card-icon {
    width: 112px;
    height: 112px;
    fill: none;
    stroke: currentColor;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tdk-latest-card__body {
    padding: 21px 22px 20px;
}

.tdk-latest-card__body h3 {
    margin: 0 0 11px;
    color: var(--tdk-navy);
    font-size: 17px;
    font-weight: 900;
    line-height: 1.62;
    letter-spacing: -0.02em;
}

.tdk-latest-card__body p {
    margin: 0 0 17px;
    color: #71808a;
    font-size: 11.5px;
    line-height: 1.8;
}

.tdk-latest-card__body time {
    color: #98a3aa;
    font-size: 10px;
}

.tdk-latest-empty {
    display: flex;
    align-items: center;
    gap: 22px;
    min-height: 132px;
    padding: 27px 30px;
    background: #fff;
    border: 1px solid var(--tdk-line);
    border-radius: var(--tdk-radius);
}

.tdk-latest-empty__mark {
    position: relative;
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    background: var(--tdk-soft-blue);
    border: 1px solid #c9dce7;
    border-radius: 50%;
}

.tdk-latest-empty__mark::before,
.tdk-latest-empty__mark::after {
    content: "";
    position: absolute;
    left: 17px;
    width: 20px;
    height: 2px;
    background: var(--tdk-blue);
}

.tdk-latest-empty__mark::before {
    top: 21px;
}

.tdk-latest-empty__mark::after {
    top: 30px;
}

.tdk-latest-empty strong {
    display: block;
    margin-bottom: 4px;
    color: var(--tdk-navy);
    font-size: 16px;
}

.tdk-latest-empty p {
    margin: 0;
    color: var(--tdk-muted);
    font-size: 12px;
}

.tdk-purpose-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(310px, 0.85fr);
    gap: 20px;
}

.tdk-purpose-main {
    position: relative;
    overflow: hidden;
    min-height: 330px;
    margin: 0;
    padding: 42px;
    color: #fff;
    background: var(--tdk-navy);
    border-radius: 12px;
}

.tdk-purpose-main::after {
    content: "";
    position: absolute;
    right: -65px;
    bottom: -75px;
    width: 240px;
    height: 240px;
    border: 48px solid rgba(245, 196, 0, 0.17);
    border-radius: 50%;
}

.tdk-purpose-main .tdk-section-kicker {
    color: var(--tdk-yellow);
}

.tdk-purpose-main h3 {
    position: relative;
    z-index: 1;
    margin: 0 0 15px;
    color: #fff;
    font-size: 30px;
    font-weight: 900;
    line-height: 1.45;
    letter-spacing: -0.035em;
}

.tdk-purpose-main > p:last-child {
    position: relative;
    z-index: 1;
    max-width: 540px;
    margin: 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 13px;
    line-height: 1.85;
}

.tdk-purpose-side {
    display: grid;
    gap: 20px;
}

.tdk-purpose-card {
    margin: 0;
    padding: 28px 30px;
    background: #fff;
    border: 1px solid var(--tdk-line);
    border-radius: 12px;
}

.tdk-purpose-card b {
    display: block;
    margin-bottom: 8px;
    color: var(--tdk-blue);
    font-size: 9px;
    letter-spacing: 0.15em;
}

.tdk-purpose-card h3 {
    margin: 0 0 8px;
    color: var(--tdk-navy);
    font-size: 19px;
    font-weight: 900;
    line-height: 1.5;
}

.tdk-purpose-card p {
    margin: 0;
    color: #71808a;
    font-size: 12px;
    line-height: 1.75;
}

.tdk-home-about {
    padding: 60px 0;
    background: #eef3f5;
    border-top: 1px solid #e1e7ea;
}

.tdk-home-about__inner {
    display: grid;
    grid-template-columns: 255px minmax(0, 1fr);
    align-items: center;
    gap: 66px;
}

.tdk-home-about__title strong {
    display: block;
    color: var(--tdk-navy);
    font-size: 22px;
    font-weight: 900;
    line-height: 1.45;
    letter-spacing: -0.035em;
}

.tdk-home-about__title span {
    display: block;
    margin-top: 5px;
    color: var(--tdk-blue);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.17em;
}

.tdk-home-about__inner > p {
    margin: 0;
    color: #536571;
    font-size: 13px;
    line-height: 2;
}

/* Inner pages: remove the former nested-card look. */
.tdk-design-active:not(.tdk-home-mounted) #content {
    width: min(calc(100% - 40px), var(--tdk-wrap));
    margin-top: 42px;
    margin-bottom: 66px;
    padding-top: 0;
}

.tdk-design-active .content-in {
    gap: 30px;
}

.tdk-design-active .main {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.tdk-design-active.single .main,
.tdk-design-active.page:not(.home) .main,
.tdk-design-active.search .main,
.tdk-design-active.error404 .main {
    padding: clamp(24px, 3.3vw, 42px);
    background: #fff;
    border: 1px solid var(--tdk-line);
    border-radius: var(--tdk-radius);
}

.tdk-design-active .sidebar {
    background: transparent;
}

.tdk-design-active .sidebar .widget,
.tdk-design-active .widget-sidebar {
    overflow: hidden;
    margin-bottom: 20px;
    padding: 21px;
    background: #fff;
    border: 1px solid var(--tdk-line);
    border-radius: var(--tdk-radius);
    box-shadow: none;
}

.tdk-design-active .sidebar h2,
.tdk-design-active .sidebar h3,
.tdk-design-active .widget-title {
    position: relative;
    margin: 0 0 15px;
    padding: 0 0 12px;
    color: var(--tdk-navy);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--tdk-line);
    font-size: 15px;
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: 0;
}

.tdk-design-active .sidebar h2::after,
.tdk-design-active .sidebar h3::after,
.tdk-design-active .widget-title::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 34px;
    height: 3px;
    background: var(--tdk-yellow);
}

/* Archive cards. */
.tdk-design-active .entry-card-wrap,
.tdk-design-active .related-entry-card-wrap {
    display: block;
    overflow: hidden;
    margin-bottom: 18px;
    color: inherit;
    background: #fff;
    border: 1px solid var(--tdk-line);
    border-radius: var(--tdk-radius);
    box-shadow: none;
    text-decoration: none;
    transition: border-color 0.18s ease, transform 0.18s ease;
}

.tdk-design-active .entry-card-wrap:hover,
.tdk-design-active .related-entry-card-wrap:hover {
    color: inherit;
    border-color: #b8ccd8;
    transform: translateY(-2px);
}

.tdk-design-active .entry-card {
    display: grid;
    grid-template-columns: minmax(210px, 31%) minmax(0, 1fr);
    min-height: 172px;
    padding: 0;
}

.tdk-design-active .entry-card-thumb {
    float: none;
    width: auto;
    margin: 0;
    overflow: hidden;
    background: linear-gradient(145deg, var(--tdk-navy), var(--tdk-blue));
}

.tdk-design-active .entry-card-thumb img {
    width: 100%;
    height: 100%;
    min-height: 172px;
    object-fit: cover;
}

.tdk-design-active .entry-card-content {
    display: flex;
    flex-direction: column;
    padding: 22px 24px 18px;
}

.tdk-design-active .entry-card-title {
    margin: 0 0 10px;
    color: var(--tdk-navy);
    font-size: 21px;
    font-size: clamp(17px, 1.9vw, 21px);
    font-weight: 900;
    line-height: 1.55;
    letter-spacing: -0.025em;
}

.tdk-design-active .entry-card-snippet {
    color: var(--tdk-muted);
    font-size: 12px;
    line-height: 1.8;
}

.tdk-design-active .entry-card-meta,
.tdk-design-active .e-card-info {
    margin-top: auto;
    color: #909ca4;
    font-size: 10px;
}

.tdk-design-active .cat-label,
.tdk-design-active .entry-category {
    padding: 4px 8px;
    color: var(--tdk-navy);
    background: var(--tdk-yellow);
    border-radius: 0 0 5px 0;
    font-size: 9px;
    font-weight: 900;
}

/* Article typography: quiet hierarchy instead of solid navy slabs. */
.tdk-design-active .article h1,
.tdk-design-active .entry-title {
    color: var(--tdk-navy);
    font-size: 39px;
    font-size: clamp(27px, 3.6vw, 39px);
    font-weight: 900;
    line-height: 1.45;
    letter-spacing: -0.04em;
}

.tdk-design-active .article h2 {
    position: relative;
    margin-top: 2.5em;
    padding: 15px 18px 15px 21px;
    color: var(--tdk-navy);
    background: #f3f7f9;
    border: 0;
    border-left: 5px solid var(--tdk-blue);
    border-radius: 5px;
    box-shadow: none;
    font-size: 27px;
    font-size: clamp(21px, 2.7vw, 27px);
    font-weight: 900;
    line-height: 1.55;
}

.tdk-design-active .article h3 {
    margin-top: 2.2em;
    padding: 0 0 10px;
    color: var(--tdk-navy);
    background: transparent;
    border: 0;
    border-bottom: 2px solid #d9e4e9;
    font-size: 23px;
    font-size: clamp(18px, 2.2vw, 23px);
    font-weight: 900;
    line-height: 1.55;
}

.tdk-design-active .article h3::after {
    content: "";
    display: block;
    width: 44px;
    height: 3px;
    margin-bottom: -12px;
    background: var(--tdk-yellow);
}

.tdk-design-active .article h4 {
    color: var(--tdk-navy);
    font-weight: 900;
}

.tdk-design-active .article p,
.tdk-design-active .article li {
    line-height: 1.95;
}

.tdk-design-active .article a:not(.btn):not(.wp-block-button__link) {
    color: #0e6f9d;
    text-decoration-color: rgba(14, 111, 157, 0.32);
    text-underline-offset: 3px;
}

.tdk-design-active .article blockquote {
    padding: 23px 25px 22px 29px;
    color: #405563;
    background: #f3f7f9;
    border: 0;
    border-left: 5px solid #9fc5d8;
    border-radius: 5px;
}

.tdk-design-active .toc,
.tdk-design-active .information-box,
.tdk-design-active .question-box,
.tdk-design-active .alert-box,
.tdk-design-active .memo-box,
.tdk-design-active .comment-box,
.tdk-design-active .common-icon-box {
    border-radius: 8px;
    box-shadow: none;
}

.tdk-design-active .toc {
    background: #f8fafb;
    border: 1px solid #d6e1e6;
}

.tdk-design-active .toc-title {
    color: var(--tdk-navy);
    font-weight: 900;
}

.tdk-design-active .article table {
    overflow: hidden;
    border: 1px solid var(--tdk-line);
    border-radius: 7px;
    border-collapse: separate;
    border-spacing: 0;
}

.tdk-design-active .article table th {
    color: var(--tdk-navy);
    background: #eaf1f4;
    border-color: #d4e0e5;
}

.tdk-design-active .article table td {
    border-color: var(--tdk-line);
}

.tdk-design-active .article table tr:nth-child(even) td {
    background: #fafbfc;
}

.tdk-design-active .wp-block-button__link,
.tdk-design-active .ranking-item-link-buttons a,
.tdk-design-active .btn-wrap a {
    color: #fff;
    background: var(--tdk-blue);
    border: 0;
    border-radius: 7px;
    box-shadow: none;
    font-weight: 800;
}

.tdk-design-active .wp-block-button__link:hover,
.tdk-design-active .ranking-item-link-buttons a:hover,
.tdk-design-active .btn-wrap a:hover {
    color: var(--tdk-navy);
    background: var(--tdk-yellow);
}

.tdk-design-active .pagination .current,
.tdk-design-active .page-numbers.current {
    color: var(--tdk-navy);
    background: var(--tdk-yellow);
    border-color: var(--tdk-yellow);
    font-weight: 900;
}

.tdk-design-active .breadcrumb {
    color: #788791;
    font-size: 10px;
}

.tdk-design-active .sidebar ul {
    margin: 0;
}

.tdk-design-active .sidebar li {
    border-bottom: 1px solid #e9edef;
}

.tdk-design-active .sidebar li:last-child {
    border-bottom: 0;
}

.tdk-design-active .sidebar li > a {
    display: block;
    padding: 10px 2px;
    color: #3f5361;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.tdk-design-active .sidebar li > a:hover {
    color: var(--tdk-blue);
}

.tdk-design-active .search-box {
    border-radius: 7px;
}

.tdk-design-active .search-edit {
    border-color: #ccd7dd;
    border-radius: 7px 0 0 7px;
}

.tdk-design-active .search-submit {
    color: #fff;
    background: var(--tdk-blue);
    border-radius: 0 7px 7px 0;
}

/* Footer: simple and compact. */
.tdk-design-active .footer,
.tdk-design-active #footer {
    position: relative;
    color: rgba(255, 255, 255, 0.66);
    background: #081c2a;
    border-top: 4px solid var(--tdk-yellow);
}

.tdk-design-active .footer-in,
.tdk-design-active #footer-in {
    width: min(calc(100% - 48px), var(--tdk-wrap));
    margin-right: auto;
    margin-left: auto;
    padding-top: 46px;
    padding-bottom: 30px;
}

.tdk-design-active .footer a,
.tdk-design-active .footer a:visited,
.tdk-design-active #footer a,
.tdk-design-active #footer a:visited {
    color: rgba(255, 255, 255, 0.7);
}

.tdk-design-active .footer a:hover,
.tdk-design-active #footer a:hover {
    color: var(--tdk-yellow);
}

.tdk-design-active .footer-bottom-logo .logo-text,
.tdk-design-active .footer-bottom-logo .site-name-text {
    color: #fff;
    font-weight: 900;
}

.tdk-design-active .mobile-menu-buttons {
    background: #fff;
    border-top: 1px solid var(--tdk-line);
    box-shadow: 0 -5px 18px rgba(11, 36, 54, 0.08);
}

.tdk-design-active .mobile-menu-buttons .menu-icon,
.tdk-design-active .mobile-menu-buttons a {
    color: var(--tdk-navy);
}

@media (prefers-reduced-motion: reduce) {
    .tdk-design-active *,
    .tdk-design-active *::before,
    .tdk-design-active *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media screen and (max-width: 1023px) {
    .tdk-hero__main {
        grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr);
    }

    .tdk-hero__yellow {
        right: -240px;
    }

    .tdk-bike {
        right: -145px;
        width: 560px;
    }

    .tdk-purpose-main {
        padding: 36px;
    }
}

@media screen and (max-width: 834px) {
    .tdk-design-active .header-in {
        min-height: 68px;
    }

    .tdk-design-active #navi {
        display: none;
    }

    .tdk-hero__main {
        display: block;
        min-height: 470px;
    }

    .tdk-hero__copy {
        max-width: 610px;
        padding: 55px 0 58px;
    }

    .tdk-hero__visual {
        position: absolute;
        right: -180px;
        bottom: 16px;
        width: 520px;
        min-height: 300px;
        opacity: 0.25;
    }

    .tdk-bike {
        top: 0;
        right: 0;
        width: 520px;
    }

    .tdk-section-heading {
        display: block;
    }

    .tdk-section-heading > p {
        margin-top: 12px;
    }

    .tdk-guide-grid,
    .tdk-latest-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tdk-guide-card:last-child {
        grid-column: 1 / -1;
    }

    .tdk-purpose-grid {
        grid-template-columns: 1fr;
    }

    .tdk-home-about__inner {
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 38px;
    }

    .tdk-design-active .content-in {
        display: block;
    }

    .tdk-design-active .main,
    .tdk-design-active .sidebar {
        width: 100%;
    }

    .tdk-design-active .sidebar {
        margin-top: 28px;
    }
}

@media screen and (max-width: 640px) {
    .tdk-wrap {
        width: calc(100% - 32px);
    }

    .tdk-design-active #header-container {
        border-top-width: 3px;
    }

    .tdk-design-active .header-in {
        width: calc(100% - 28px);
        min-height: 61px;
        padding: 7px 0;
    }

    .tdk-design-active .logo-header a,
    .tdk-design-active .logo-header a:visited {
        font-size: 19px;
    }

    .tdk-design-active .logo-header a::after {
        margin-top: 4px;
        font-size: 6px;
    }

    .tdk-hero__yellow {
        top: auto;
        right: -230px;
        bottom: -185px;
        width: 430px;
        height: 500px;
        transform: rotate(-18deg);
    }

    .tdk-hero__word {
        right: -20px;
        bottom: 31px;
        font-size: 92px;
    }

    .tdk-hero__main {
        min-height: 470px;
    }

    .tdk-hero__copy {
        padding: 49px 0 38px;
    }

    .tdk-hero__kicker {
        margin-bottom: 14px;
        font-size: 9px;
    }

    .tdk-hero__kicker::before {
        width: 26px;
        height: 2px;
    }

    .tdk-hero__title {
        max-width: 350px;
        font-size: 40px;
        font-size: clamp(34px, 10vw, 40px);
        line-height: 1.24;
    }

    .tdk-hero__description {
        max-width: 320px;
        margin-top: 18px;
        font-size: 12px;
        line-height: 1.8;
    }

    .tdk-hero__button,
    .tdk-hero__button:visited {
        min-width: 190px;
        margin-top: 23px;
        padding: 13px 16px 13px 18px;
        gap: 26px;
        font-size: 11px;
    }

    .tdk-hero__visual {
        right: -205px;
        bottom: 24px;
        width: 460px;
        min-height: 260px;
        opacity: 0.2;
    }

    .tdk-bike {
        width: 450px;
    }

    .tdk-hero__points-inner {
        width: 100%;
        grid-template-columns: repeat(3, 1fr);
    }

    .tdk-hero-point {
        display: block;
        min-height: 70px;
        padding: 11px 8px;
        font-size: 8.5px;
        line-height: 1.45;
    }

    .tdk-hero-point b {
        display: block;
        margin-bottom: 6px;
        font-size: 8px;
    }

    .tdk-home-section {
        padding: 52px 0 58px;
    }

    .tdk-section-heading {
        margin-bottom: 24px;
    }

    .tdk-section-heading .tdk-section-kicker {
        margin-bottom: 5px;
        font-size: 9px;
    }

    .tdk-section-heading h2 {
        font-size: 25px;
    }

    .tdk-section-heading > p {
        margin-top: 10px;
        font-size: 11px;
    }

    .tdk-guide-grid,
    .tdk-latest-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .tdk-guide-card:last-child {
        grid-column: auto;
    }

    .tdk-guide-card {
        min-height: 170px;
        padding: 23px 22px;
    }

    .tdk-guide-card__num {
        margin-bottom: 17px;
        font-size: 9px;
    }

    .tdk-guide-card h3 {
        font-size: 18px;
    }

    .tdk-guide-card p {
        font-size: 11px;
    }

    .tdk-latest-card__thumb {
        height: 178px;
    }

    .tdk-latest-card__body {
        padding: 18px;
    }

    .tdk-latest-card__body h3 {
        font-size: 16px;
    }

    .tdk-latest-empty {
        align-items: flex-start;
        gap: 15px;
        min-height: 0;
        padding: 22px 19px;
    }

    .tdk-latest-empty__mark {
        flex-basis: 44px;
        width: 44px;
        height: 44px;
    }

    .tdk-latest-empty__mark::before,
    .tdk-latest-empty__mark::after {
        left: 13px;
        width: 18px;
    }

    .tdk-latest-empty__mark::before {
        top: 17px;
    }

    .tdk-latest-empty__mark::after {
        top: 25px;
    }

    .tdk-latest-empty strong {
        font-size: 14px;
    }

    .tdk-latest-empty p {
        font-size: 10.5px;
    }

    .tdk-purpose-grid,
    .tdk-purpose-side {
        gap: 14px;
    }

    .tdk-purpose-main {
        min-height: 300px;
        padding: 30px 25px;
    }

    .tdk-purpose-main h3 {
        font-size: 25px;
    }

    .tdk-purpose-main > p:last-child {
        font-size: 11px;
    }

    .tdk-purpose-card {
        padding: 23px;
    }

    .tdk-purpose-card h3 {
        font-size: 17px;
    }

    .tdk-home-about {
        padding: 42px 0;
    }

    .tdk-home-about__inner {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .tdk-home-about__title strong {
        font-size: 20px;
    }

    .tdk-home-about__inner > p {
        font-size: 11.5px;
    }

    .tdk-design-active:not(.tdk-home-mounted) #content {
        width: calc(100% - 20px);
        margin-top: 22px;
        margin-bottom: 42px;
    }

    .tdk-design-active.single .main,
    .tdk-design-active.page:not(.home) .main,
    .tdk-design-active.search .main,
    .tdk-design-active.error404 .main {
        padding: 20px 15px;
        border-radius: 8px;
    }

    .tdk-design-active .entry-card {
        display: block;
        min-height: 0;
    }

    .tdk-design-active .entry-card-thumb {
        aspect-ratio: 16 / 9;
    }

    .tdk-design-active .entry-card-thumb img {
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .tdk-design-active .entry-card-content {
        padding: 18px 17px 16px;
    }

    .tdk-design-active .entry-card-title {
        font-size: 18px;
    }

    .tdk-design-active .article h1,
    .tdk-design-active .entry-title {
        font-size: 27px;
    }

    .tdk-design-active .article h2 {
        padding: 13px 14px 13px 17px;
        font-size: 21px;
    }

    .tdk-design-active .article h3 {
        font-size: 18px;
    }

    .tdk-design-active .footer-in,
    .tdk-design-active #footer-in {
        width: calc(100% - 32px);
        padding-top: 38px;
    }
}

/* ==========================================================================
   2.0.0 production visual QA — pass 1
   ========================================================================== */

/* The point bar was translucent, so the yellow wedge bled through it and left
   items 02 and 03 sitting on an olive background with weak contrast. */
.tdk-hero__points {
    background: #081d2c;
}

@media screen and (max-width: 640px) {
    /* Clear the yellow wedge away from the CTA so it stops notching around it. */
    .tdk-hero__yellow {
        right: -300px;
        bottom: -205px;
    }

    /* At 0.2 over the yellow the bike read as a muddy shape rather than texture. */
    .tdk-hero__visual {
        opacity: 0.13;
    }
}

/* ==========================================================================
   2.0.0 production visual QA — pass 2
   ========================================================================== */

/* Inner pages sat flush to the left edge because the narrowed content column
   never got auto margins, and main + sidebar could not fit side by side in it,
   so the sidebar wrapped below and left the right half of the page empty. */
.tdk-design-active:not(.tdk-home-mounted) #content {
    margin-left: auto;
    margin-right: auto;
}

@media screen and (min-width: 1024px) {
    .tdk-design-active:not(.tdk-home-mounted) .content-in {
        display: flex;
        align-items: flex-start;
    }

    .tdk-design-active:not(.tdk-home-mounted) .main {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }

    .tdk-design-active:not(.tdk-home-mounted) .sidebar {
        flex: 0 0 336px;
        width: 336px;
        margin-top: 0;
    }
}

/* ==========================================================================
   2.1.0 final polish
   ========================================================================== */

/* 1. Cocoon's key colour (#e57373) paints the tagline element, which sits as a
      full-width band across the very top. The site description is empty, so it
      rendered as a bare coral stripe above the yellow rule. */
.tdk-design-active .tagline {
    background: transparent;
    color: var(--tdk-muted);
    font-size: 11px;
}

/* 2. Compact header. Cocoon pads the logo heading by 20px/30px, which is what
      made the header 173px tall on desktop while the logo itself stayed small. */
.tdk-design-active #header-container {
    padding-top: 8px;
    border-top-width: 3px;
}

.tdk-design-active .header-in {
    min-height: 0;
    padding-top: 6px;
    padding-bottom: 6px;
}

.tdk-design-active .logo-header,
.tdk-design-active .logo.logo-header,
.tdk-design-active h1.logo-header {
    margin: 0;
    padding: 0;
}

.tdk-design-active .logo-header a,
.tdk-design-active .logo-header a:visited {
    font-size: 32px;
    line-height: 1.2;
}

.tdk-design-active .logo-header a::after {
    margin-top: 5px;
    font-size: 9px;
    letter-spacing: 0.26em;
}

/* 3. The theme's fixed mobile bar has nothing to link to while no menu exists,
      and it floats over the custom home page. Both classes are printed server
      side, so it never paints; assigning a menu brings the bar straight back. */
body.tdk-home-candidate.tdk-menu-empty .mobile-menu-buttons,
body.tdk-home-candidate.tdk-menu-empty .mobile-footer-menu-buttons {
    display: none !important;
}

body.tdk-home-candidate.tdk-menu-empty {
    padding-bottom: 0 !important;
}

/* 7. All three guide cards are equal-rank steps, so the first one no longer
      reads as a selected or recommended state. */
.tdk-design-active .tdk-guide-card--primary {
    background: #fff;
    border-color: var(--tdk-line);
}

/* 8. Supporting copy was down at 11-13px and too light to read comfortably. */
.tdk-design-active .tdk-hero__description {
    font-size: 16px;
    line-height: 1.85;
    color: rgba(255, 255, 255, 0.86);
}

.tdk-design-active .tdk-section-heading > p,
.tdk-design-active .tdk-guide-card p,
.tdk-design-active .tdk-purpose-card p,
.tdk-design-active .tdk-home-about p {
    color: #55677a;
    font-size: 15px;
    line-height: 1.8;
}

.tdk-design-active .tdk-section-kicker {
    font-size: 11px;
}

/* 9. The section lead was pushed to the far right edge by space-between, so it
      read as an unrelated fragment instead of a subtitle for the heading. */
@media screen and (min-width: 835px) {
    .tdk-design-active .tdk-section-heading {
        justify-content: flex-start;
        gap: 34px;
    }

    .tdk-design-active .tdk-section-heading > p {
        max-width: 380px;
    }
}

/* 10. Vertical rhythm tightened by roughly 15-20% for the current amount of
       content, keeping the footer as it is. */
.tdk-design-active .tdk-home-section {
    padding: 64px 0 68px;
}

.tdk-design-active .tdk-section-heading {
    margin-bottom: 26px;
}

.tdk-design-active .tdk-guide-card {
    min-height: 190px;
    padding: 24px 26px 22px;
}

.tdk-design-active .tdk-guide-card__num {
    margin-bottom: 18px;
}

.tdk-design-active .tdk-home-about {
    padding-top: 46px;
    padding-bottom: 46px;
}

@media screen and (max-width: 640px) {
    /* 2. Header on phones. */
    .tdk-design-active #header-container {
        padding-top: 8px;
    }

    .tdk-design-active .header-in {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .tdk-design-active .logo-header a,
    .tdk-design-active .logo-header a:visited {
        font-size: 24px;
    }

    .tdk-design-active .logo-header a::after {
        margin-top: 3px;
        font-size: 8px;
    }

    /* 6. The three points were rendering at 8.5px. Short labels let them stay
          on one row and still be read. */
    .tdk-hero-point {
        padding: 12px 10px;
        font-size: 11.5px;
        line-height: 1.5;
    }

    .tdk-hero-point b {
        margin-bottom: 5px;
        font-size: 10px;
    }

    /* 8. Body copy floor on phones. */
    .tdk-design-active .tdk-hero__description {
        font-size: 14.5px;
        line-height: 1.75;
    }

    .tdk-design-active .tdk-section-heading > p,
    .tdk-design-active .tdk-guide-card p,
    .tdk-design-active .tdk-purpose-card p,
    .tdk-design-active .tdk-home-about p {
        font-size: 14px;
        line-height: 1.75;
    }

    .tdk-design-active .tdk-section-kicker {
        font-size: 10px;
    }

    /* 10. Vertical rhythm on phones. */
    .tdk-design-active .tdk-home-section {
        padding: 44px 0 48px;
    }

    .tdk-design-active .tdk-home-about {
        padding-top: 36px;
        padding-bottom: 36px;
    }

    .tdk-design-active .tdk-guide-card {
        min-height: 0;
        padding: 20px 18px 18px;
    }
}

/* 6. Long labels are for wide screens, short ones for phones. */
.tdk-point-short {
    display: none;
}

@media screen and (max-width: 640px) {
    .tdk-point-long {
        display: none;
    }

    .tdk-point-short {
        display: inline;
    }
}

/* 5. On phones the bike sat half outside the yellow wedge at low opacity and
      read as a rendering fault. The wedge alone carries the decoration there;
      the desktop illustration is untouched. */
@media screen and (max-width: 480px) {
    .tdk-hero__visual,
    .tdk-bike {
        display: none;
    }
}

/* --- 2.1.0 visual QA pass 1 --- */

/* The logo anchor is inline while its ::after is a block, so the inline split
   into three line boxes and the empty trailing one added ~38px of dead height.
   Making the anchor inline-block collapses it and lands the header on target. */
.tdk-design-active .logo-header a,
.tdk-design-active .logo-header a:visited {
    display: inline-block;
    padding-left: 0;
    padding-right: 0;
}

/* Three equal guide cards down to the phone breakpoint; the two-column rule
   left the third card stretched across the full row on tablets. */
@media screen and (min-width: 641px) and (max-width: 834px) {
    .tdk-design-active .tdk-guide-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    .tdk-design-active .tdk-guide-card:last-child {
        grid-column: auto;
    }

    .tdk-design-active .tdk-guide-card {
        padding: 20px 18px 18px;
    }

    .tdk-design-active .tdk-guide-card h3 {
        font-size: 17px;
    }
}

/* --- 2.1.0 visual QA pass 2 --- */

/* On phones the oversized RIDER watermark is sliced in half by the point bar
   and straddles the navy/yellow edge, which reads as a clipping fault. The
   wedge alone carries the decoration at this width. */
@media screen and (max-width: 640px) {
    .tdk-hero__word {
        display: none;
    }
}