.colt-font-tester {
    width: 100%;
    border-top: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    color: inherit;
}

.cft-toolbar {
    display: grid;
    grid-template-columns: repeat(var(--cft-toolbar-columns, 5), minmax(0, 1fr));
    gap: 18px;
    align-items: end;
    padding: 16px 0;
    border-bottom: 1px solid color-mix(in srgb, currentColor 28%, transparent);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 1.2;
}

.cft-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.cft-field > span {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    opacity: .7;
}

.cft-field select {
    width: 100%;
    min-height: 34px;
    padding: 5px 8px;
    border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
}

.cft-field input[type="range"] {
    width: 100%;
}

.cft-reset {
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid currentColor;
    border-radius: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
}

.cft-preview {
    min-height: 210px;
    padding: 28px 0 36px;
    outline: none;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.cft-preview:focus {
    outline: none;
}

.colt-fonts-notice {
    padding: 12px 14px;
    border: 1px solid #d63638;
}

@media (max-width: 900px) {
    .cft-toolbar {
        grid-template-columns: 1fr 1fr;
    }

    .cft-reset {
        width: max-content;
    }
}

@media (max-width: 600px) {
    .cft-toolbar {
        grid-template-columns: 1fr;
    }

    .cft-preview {
        min-height: 160px;
    }
}

/* Family builder */
.colt-font-builder {
    width: 100%;
    border-top: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    color: inherit;
}

.cfb-head {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: end;
    padding: 22px 0 18px;
}

.cfb-title {
    margin: 0 0 6px;
    color: inherit;
    font: inherit;
    font-size: clamp(22px, 2vw, 32px);
    font-weight: 600;
}

.cfb-intro {
    margin: 0;
    opacity: .7;
}

.cfb-top-actions {
    display: flex;
    gap: 14px;
    flex: 0 0 auto;
}

.cfb-text-button {
    padding: 0;
    border: 0;
    border-bottom: 1px solid currentColor;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
}

.cfb-styles {
    display: grid;
    grid-template-columns: repeat(var(--cfb-style-columns, 2), minmax(0, 1fr));
    border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent);
}

.cfb-style-row {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    min-height: 58px;
    padding: 10px 0;
    border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
    cursor: pointer;
}

.cfb-style-row:nth-child(odd) {
    padding-right: 22px;
}

.cfb-style-row:nth-child(even) {
    padding-left: 22px;
    border-left: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

.cfb-style-check {
    display: flex;
    gap: 12px;
    align-items: center;
    min-width: 0;
}

.cfb-style-input {
    width: 18px;
    height: 18px;
    margin: 0;
    flex: 0 0 auto;
}

.cfb-style-name {
    display: block;
    min-width: 0;
    padding-block: .12em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.35;
}

.cfb-style-price {
    flex: 0 0 auto;
    opacity: .7;
}

.cfb-summary {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto;
    gap: 36px;
    align-items: end;
    padding: 22px 0;
}

.cfb-summary-lines {
    max-width: 440px;
}

.cfb-summary-lines > div {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding: 4px 0;
}

.cfb-discount-line {
    opacity: .72;
}

.cfb-total-line {
    margin-top: 8px;
    padding-top: 12px !important;
    border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent);
    font-size: 18px;
}

.cfb-purchase {
    display: grid;
    justify-items: end;
    gap: 8px;
    min-width: 220px;
}

.cfb-add-to-cart {
    min-width: 220px;
    min-height: 48px;
    padding: 10px 20px;
    border: 1px solid currentColor;
    border-radius: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
}

.cfb-add-to-cart:disabled {
    opacity: .35;
    cursor: not-allowed;
}

.cfb-view-cart {
    color: inherit;
    text-decoration: underline;
}

.cfb-message {
    min-height: 1.3em;
    max-width: 320px;
    font-size: 13px;
    text-align: right;
}

@media (max-width: 760px) {
    .cfb-head,
    .cfb-summary {
        grid-template-columns: 1fr;
        display: grid;
        align-items: start;
    }

    .cfb-styles {
        grid-template-columns: 1fr;
    }

    .cfb-style-row:nth-child(odd),
    .cfb-style-row:nth-child(even) {
        padding-left: 0;
        padding-right: 0;
        border-left: 0;
    }

    .cfb-purchase {
        justify-items: stretch;
    }

    .cfb-add-to-cart {
        width: 100%;
    }

    .cfb-message {
        text-align: left;
    }
}

/* Licensing */
.cfb-licensing {
    padding: 24px 0 4px;
    border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent);
}

.cfb-license-head {
    margin-bottom: 14px;
}

.cfb-license-title {
    margin: 0 0 6px;
    color: inherit;
    font: inherit;
    font-size: clamp(20px, 1.7vw, 28px);
    font-weight: 600;
}

.cfb-license-head p {
    margin: 0;
    opacity: .7;
}

.cfb-license-rows {
    border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

.cfb-license-row {
    display: grid;
    grid-template-columns: minmax(150px, .7fr) minmax(320px, 1.3fr);
    gap: 24px;
    align-items: center;
    min-height: 68px;
    padding: 12px 0;
    border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

.cfb-license-row:not(.is-selected) {
    opacity: .55;
}

.cfb-license-row--simple {
    grid-template-columns: 1fr;
    min-height: 58px;
}

.cfb-license-toggle {
    display: flex;
    gap: 12px;
    align-items: center;
    font-weight: 600;
}

.cfb-license-input {
    width: 18px;
    height: 18px;
    margin: 0;
}

.cfb-license-options {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(180px, 1fr);
    gap: 14px;
    align-items: end;
}

.cfb-license-options select,
.cfb-license-options input[type="text"] {
    width: 100%;
    min-height: 40px;
    padding: 7px 10px;
    border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
}

.cfb-license-detail-wrap {
    display: grid;
    gap: 4px;
}

.cfb-license-detail-wrap > span {
    font-size: 12px;
    opacity: .68;
}

.cfb-pack-line,
.cfb-license-summary-line {
    opacity: .8;
}

@media (max-width: 760px) {
    .cfb-license-row,
    .cfb-license-options {
        grid-template-columns: 1fr;
    }

    .cfb-license-row {
        gap: 10px;
        align-items: start;
    }
}


/* Protected order downloads */
.colt-font-downloads {
    margin-top: 36px;
    padding: 28px 0 8px;
    border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}

.colt-font-downloads h2 {
    margin: 0 0 10px;
}

.colt-font-downloads > p:not(.colt-font-download-action):not(.woocommerce-info) {
    margin: 0 0 22px;
    max-width: 760px;
    opacity: .72;
}

.colt-font-download-action {
    margin: 0;
}

.woocommerce .colt-font-downloads .colt-font-download-button,
.colt-font-downloads .colt-font-download-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 320px;
    min-height: 62px;
    padding: 16px 28px;
    border: 2px solid #171717;
    border-radius: 0;
    background: #171717;
    color: #fff;
    font: inherit;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    box-shadow: none;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

.woocommerce .colt-font-downloads .colt-font-download-button:hover,
.woocommerce .colt-font-downloads .colt-font-download-button:focus,
.colt-font-downloads .colt-font-download-button:hover,
.colt-font-downloads .colt-font-download-button:focus {
    background: transparent;
    color: #171717;
    text-decoration: none;
    transform: translateY(-1px);
}

@media (max-width: 600px) {
    .woocommerce .colt-font-downloads .colt-font-download-button,
    .colt-font-downloads .colt-font-download-button {
        width: 100%;
        min-width: 0;
    }
}

/* v0.5 licence certificate + account */
.colt-font-download-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: stretch;
}

.woocommerce .colt-font-downloads .colt-font-licence-button,
.colt-font-downloads .colt-font-licence-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 250px;
    min-height: 62px;
    padding: 16px 28px;
    border: 2px solid #171717;
    border-radius: 0;
    background: transparent;
    color: #171717;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    box-shadow: none;
}

.woocommerce .colt-font-downloads .colt-font-licence-button:hover,
.woocommerce .colt-font-downloads .colt-font-licence-button:focus,
.colt-font-downloads .colt-font-licence-button:hover,
.colt-font-downloads .colt-font-licence-button:focus {
    background: #171717;
    color: #fff;
    text-decoration: none;
}

.colt-font-licence-account > h2 {
    margin-bottom: 6px;
}

.colt-font-licence-intro {
    margin: 0 0 28px;
    opacity: .72;
}

.colt-font-licence-card {
    margin: 0 0 22px;
    padding: 24px;
    border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}

.colt-font-licence-card-head {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: start;
    padding-bottom: 18px;
    border-bottom: 1px solid color-mix(in srgb, currentColor 16%, transparent);
}

.colt-font-licence-card-head h3 {
    margin: 0 0 4px;
    font-size: 22px;
}

.colt-font-licence-card-head p {
    margin: 0;
    opacity: .65;
}

.colt-font-licence-status {
    display: inline-flex;
    padding: 5px 9px;
    border: 1px solid currentColor;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.colt-font-licence-details {
    margin: 18px 0 20px;
}

.colt-font-licence-details > div {
    display: grid;
    grid-template-columns: minmax(110px, 150px) 1fr;
    gap: 18px;
    padding: 6px 0;
}

.colt-font-licence-details dt {
    font-weight: 700;
}

.colt-font-licence-details dd {
    margin: 0;
}

.colt-font-licence-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.woocommerce .colt-font-licence-actions .button.colt-font-account-primary,
.woocommerce .colt-font-licence-actions .button.colt-font-account-secondary {
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid #171717;
    border-radius: 0;
    box-shadow: none;
}

.woocommerce .colt-font-licence-actions .button.colt-font-account-primary {
    background: #171717;
    color: #fff;
}

.woocommerce .colt-font-licence-actions .button.colt-font-account-secondary {
    background: transparent;
    color: #171717;
}

@media (max-width: 600px) {
    .colt-font-download-actions,
    .colt-font-licence-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .woocommerce .colt-font-downloads .colt-font-licence-button,
    .colt-font-downloads .colt-font-licence-button {
        width: 100%;
        min-width: 0;
    }

    .colt-font-licence-card {
        padding: 18px;
    }

    .colt-font-licence-card-head {
        display: grid;
    }

    .colt-font-licence-details > div {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}


/* v0.6 family-builder polish */
.colt-font-builder {
    --colt-fonts-action-bg: #111;
    --colt-fonts-action-text: #fff;
}

.cfb-style-row {
    transition: opacity .16s ease, background-color .16s ease;
}

.cfb-style-row.is-selected {
    background: color-mix(in srgb, currentColor 5%, transparent);
}

.cfb-add-to-cart {
    border-color: var(--colt-fonts-action-bg);
    background: var(--colt-fonts-action-bg);
    color: var(--colt-fonts-action-text);
    font-weight: 600;
    transition: opacity .16s ease, transform .16s ease;
}

.cfb-add-to-cart:not(:disabled):hover {
    opacity: .86;
}

.cfb-add-to-cart:not(:disabled):active {
    transform: translateY(1px);
}

/* Glyph viewer */
.colt-font-glyphs {
    --cfg-accent: #fff72b;
    --cfg-line: color-mix(in srgb, currentColor 34%, transparent);
    --cfg-soft-line: color-mix(in srgb, currentColor 20%, transparent);
    --cfg-detail-width: 46%;
    --cfg-grid-columns: 7;
    width: 100%;
    color: inherit;
}

.cfg-layout {
    display: grid;
    grid-template-columns: minmax(0, var(--cfg-detail-width)) minmax(0, 1fr);
    min-height: 720px;
    border-top: 1px solid var(--cfg-line);
    border-bottom: 1px solid var(--cfg-line);
}

.cfg-detail-panel,
.cfg-grid-panel {
    min-width: 0;
}

.cfg-detail-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    padding: var(--cfg-detail-padding, 0 34px 0 0);
    border-right: 1px solid var(--cfg-line);
}

/* Keep the detail preview visible while the glyph grid scrolls. The sticky
 * panel remains bounded by .cfg-layout, so it releases naturally at the end
 * of the glyph section instead of floating over later page content. */
@media (min-width: 821px) and (min-height: 620px) {
    .colt-font-glyphs,
    .cfg-layout {
        overflow: visible;
    }

    .cfg-detail-panel {
        position: sticky;
        top: 24px;
        align-self: start;
        height: calc(100vh - 48px);
        min-height: 560px;
        max-height: 860px;
    }
}

.cfg-detail-stage {
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    min-height: 500px;
    overflow: hidden;
}

.cfg-metric-svg {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 500px;
    overflow: visible;
    color: inherit;
}

.cfg-metric-line {
    stroke: var(--cfg-line);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

.cfg-metric-xheight {
    stroke-dasharray: 7 11;
}

.cfg-metric-baseline {
    stroke: #ff5a4f;
    stroke-width: 1.5;
}

.cfg-detail-glyph {
    position: relative;
    z-index: 1;
    fill: currentColor;
    dominant-baseline: alphabetic;
}

.cfg-metric-label {
    fill: currentColor;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 34px;
    font-weight: 400;
    opacity: .68;
    pointer-events: none;
    paint-order: normal;
    stroke: none;
    vector-effect: non-scaling-stroke;
}

.cfg-detail-meta {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 22px 0 30px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 1.25;
}

.cfg-detail-meta > div {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 12px;
}

.cfg-detail-meta dt,
.cfg-detail-meta dd {
    margin: 0;
}

.cfg-detail-meta dd {
    font-variant-numeric: tabular-nums;
}

/* Glyph set filters are styled explicitly so theme button rules do not leak into the viewer. */
.cfg-panel-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px 18px;
    align-items: center;
    padding: 12px 0;
}

.cfg-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.colt-font-glyphs .cfg-filter {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    margin: 0;
    padding: 7px 14px;
    border: 1px solid currentColor;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: 1.2;
    text-decoration: none;
    box-shadow: none;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

.colt-font-glyphs .cfg-filter:hover,
.colt-font-glyphs .cfg-filter:focus-visible {
    background: color-mix(in srgb, currentColor 8%, transparent);
    color: inherit;
    border-color: currentColor;
}

.colt-font-glyphs .cfg-filter.is-active {
    background: var(--cfg-accent);
    color: inherit;
    border-color: currentColor;
}

.cfg-grid {
    display: grid;
    grid-template-columns: repeat(var(--cfg-grid-columns, 7), minmax(0, 1fr));
    border-top: 1px solid var(--cfg-line);
    border-left: 1px solid var(--cfg-line);
}

.cfg-glyph {
    aspect-ratio: 1 / 1;
    min-width: 0;
    padding: 6px;
    border: 0;
    border-right: 1px solid var(--cfg-line);
    border-bottom: 1px solid var(--cfg-line);
    border-radius: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    overflow: hidden;
    transition: background-color .08s ease;
}

.cfg-glyph span {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    font-family: var(--cfg-font), sans-serif;
    font-size: clamp(32px, 3vw, 52px);
    font-weight: var(--cfg-weight);
    font-style: var(--cfg-style);
    line-height: 1;
    transition: transform .1s ease;
}

.cfg-glyph:hover,
.cfg-glyph.is-previewing,
.cfg-glyph.is-selected {
    background: var(--cfg-accent);
}

.cfg-glyph:hover span,
.cfg-glyph.is-previewing span {
    transform: scale(1.05);
}

.cfg-glyph.is-hidden {
    display: none;
}

@media (max-width: 1024px) {
    .cfg-layout {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .cfg-detail-panel {
        position: relative;
        top: auto !important;
        height: auto;
        min-height: 0;
        max-height: none;
        padding: 0;
        border-right: 0;
        border-bottom: 1px solid var(--cfg-line);
    }

    .cfg-grid-panel {
        min-width: 0;
        padding-left: 0;
    }

    .cfg-panel-head {
        min-height: 0;
        padding: 18px 0;
    }

    .cfg-detail-stage,
    .cfg-metric-svg {
        min-height: 420px;
        max-height: 60vh;
    }

    .cfg-grid {
        grid-template-columns: repeat(var(--cfg-grid-columns, 5), minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .cft-toolbar {
        grid-template-columns: repeat(var(--cft-toolbar-columns, 1), minmax(0, 1fr));
        gap: 14px;
    }

    .cft-reset {
        width: 100%;
    }

    .cft-preview {
        min-height: 150px;
        overflow-x: hidden;
    }

    .cfb-head {
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
        align-items: start;
    }

    .cfb-top-actions {
        flex-wrap: wrap;
    }

    .cfb-styles {
        grid-template-columns: repeat(var(--cfb-style-columns, 1), minmax(0, 1fr));
    }

    .cfb-style-row:nth-child(odd),
    .cfb-style-row:nth-child(even) {
        padding-left: 0;
        padding-right: 0;
        border-left: 0;
    }

    .cfb-style-name {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .cfb-summary {
        display: grid;
        grid-template-columns: 1fr;
        gap: 22px;
        align-items: start;
    }

    .cfb-summary-lines {
        width: 100%;
        max-width: none;
    }

    .cfb-purchase {
        width: 100%;
        min-width: 0;
        justify-items: stretch;
    }

    .cfb-add-to-cart {
        width: 100%;
        min-width: 0;
    }

    .cfb-message {
        max-width: none;
        text-align: left;
    }

    .cfb-license-row,
    .cfb-license-options {
        grid-template-columns: 1fr;
    }

    .cfb-license-row {
        gap: 10px;
        align-items: start;
    }

    .cfg-detail-stage,
    .cfg-metric-svg {
        min-height: 340px;
        max-height: 52vh;
    }

    .cfg-detail-meta {
        padding-bottom: 20px;
    }

    .cfg-grid {
        grid-template-columns: repeat(var(--cfg-grid-columns, 4), minmax(0, 1fr));
    }

    .cfg-glyph {
        padding: 4px;
    }
}

@media (max-width: 420px) {
    .cfg-detail-stage,
    .cfg-metric-svg {
        min-height: 290px;
        max-height: 48vh;
    }

    .cfg-grid {
        grid-template-columns: repeat(var(--cfg-grid-columns, 3), minmax(0, 1fr));
    }

    .cfb-summary-lines > div {
        gap: 12px;
    }
}

/* v0.10.7 reusable free-font badge */
.colt-free-font-badge {
    box-sizing: border-box;
    display: inline-flex;
    width: 120px;
    min-width: 0;
    height: 120px;
    min-height: 0;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: .05em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 1;
}

.colt-free-font-badge__text {
    display: block;
    width: 100%;
    min-width: 0;
}

/* Trial font catalogue */
.colt-trial-fonts {
    --ctf-trial-border: rgba(17, 17, 17, 0.22);
    --ctf-trial-text: #111;
    --ctf-trial-bg: #fff;
    color: var(--ctf-trial-text);
    width: 100%;
}
.ctf-trial-header {
    margin-bottom: 32px;
}
.ctf-trial-title {
    margin: 0 0 10px;
    font-size: clamp(32px, 5vw, 72px);
    line-height: 0.95;
}
.ctf-trial-intro {
    margin: 0;
    max-width: 720px;
    font-size: 17px;
    line-height: 1.5;
}
.ctf-trial-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--ctf-trial-border);
}
.ctf-trial-card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "name check"
        "count check";
    align-items: center;
    min-height: 132px;
    padding: 24px 26px;
    border-bottom: 1px solid var(--ctf-trial-border);
    border-right: 1px solid var(--ctf-trial-border);
    background: var(--ctf-trial-bg);
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}
.ctf-trial-card:nth-child(2n+1) {
    border-left: 1px solid var(--ctf-trial-border);
}
.ctf-trial-card:hover,
.ctf-trial-card.is-selected {
    background: var(--ctf-trial-text);
    color: var(--ctf-trial-bg);
}
.ctf-trial-checkbox {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.ctf-trial-family-name {
    grid-area: name;
    display: block;
    overflow: hidden;
    font-size: clamp(30px, 4vw, 60px);
    line-height: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.ctf-trial-file-count {
    grid-area: count;
    margin-top: 12px;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .68;
}
.ctf-trial-check {
    grid-area: check;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-left: 20px;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 16px;
    opacity: .38;
}
.ctf-trial-card.is-selected .ctf-trial-check {
    opacity: 1;
}
.ctf-trial-request {
    display: grid;
    grid-template-columns: minmax(120px, .35fr) minmax(260px, 1fr) auto;
    gap: 18px;
    align-items: end;
    margin-top: 32px;
}
.ctf-trial-selection-summary {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-height: 48px;
}
.ctf-trial-selected-count {
    font-size: 34px;
    line-height: 1;
}
.ctf-trial-email-field {
    display: grid;
    gap: 7px;
}
.ctf-trial-email-field > span {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.ctf-trial-email {
    width: 100%;
    min-height: 50px;
    padding: 12px 14px;
    border: 1px solid var(--ctf-trial-border);
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
}
.ctf-trial-submit {
    min-height: 50px;
    padding: 12px 22px;
    border: 1px solid var(--ctf-trial-text);
    border-radius: 0;
    background: var(--ctf-trial-text);
    color: var(--ctf-trial-bg);
    font: inherit;
    font-weight: 700;
    letter-spacing: .04em;
    cursor: pointer;
}
.ctf-trial-submit:hover {
    opacity: .86;
}
.ctf-trial-submit:disabled {
    cursor: wait;
    opacity: .55;
}
.ctf-trial-consent,
.ctf-trial-smallprint,
.ctf-trial-message {
    grid-column: 2 / -1;
}
.ctf-trial-consent {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 13px;
    line-height: 1.45;
}
.ctf-trial-consent input {
    margin-top: 3px;
}
.ctf-trial-smallprint {
    margin: 0;
    max-width: 760px;
    font-size: 12px;
    line-height: 1.5;
    opacity: .68;
}
.ctf-trial-message {
    min-height: 1.4em;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}
.ctf-trial-message.is-error {
    color: #a32727;
}
.ctf-trial-message.is-success {
    color: #24713d;
}
.ctf-trial-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}
.colt-trial-font-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

@media (max-width: 767px) {
    .ctf-trial-grid {
        grid-template-columns: 1fr;
    }
    .ctf-trial-card,
    .ctf-trial-card:nth-child(2n+1) {
        border-left: 1px solid var(--ctf-trial-border);
    }
    .ctf-trial-request {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
    .ctf-trial-consent,
    .ctf-trial-smallprint,
    .ctf-trial-message {
        grid-column: 1;
    }
    .ctf-trial-submit {
        width: 100%;
    }
}