/* Product descriptions: editorial feature cards, tuned to the AWS red/charcoal storefront. */
.technical-documentation-area:has(.aws-feature-story) {
    box-sizing: border-box;
    width: 100%;
    max-width: 1360px;
    margin: clamp(44px, 7vw, 88px) auto;
    padding: 0 clamp(16px, 3vw, 34px);
    scroll-margin-top: 110px;
}

.aws-feature-story {
    --feature-accent: #ff4657;
    --feature-muted: #aab0be;
    color: var(--feature-muted);
    font: 15px/1.8 Inter, system-ui, sans-serif;
}

.feature-story-heading {
    position: relative;
    max-width: 760px;
    margin: 0 auto clamp(28px, 4vw, 48px);
    text-align: center;
}

.feature-story-heading > span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 13px;
    border: 1px solid rgb(255 70 87 / 24%);
    border-radius: 999px;
    background: rgb(255 70 87 / 7%);
    color: #ff7c88;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.feature-story-heading > span::before {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--feature-accent);
    box-shadow: 0 0 13px rgb(255 70 87 / 85%);
    content: "";
}

.feature-story-heading h2 {
    margin: 16px 0 10px;
    color: #fff;
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 850;
    letter-spacing: -1.8px;
    line-height: 1.12;
}

.feature-story-heading p {
    margin: 0;
    color: #9299aa;
    font-size: 14px;
}

.aws-feature-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: clamp(30px, 5vw, 72px);
    align-items: center;
    min-width: 0;
    margin: 24px 0;
    padding: clamp(24px, 4vw, 54px);
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 9%);
    border-radius: 26px;
    background:
        radial-gradient(ellipse at 0% 0%, rgb(255 70 87 / 13%), transparent 43%),
        linear-gradient(132deg, rgb(255 255 255 / 9%), rgb(24 23 30 / 56%) 45%, rgb(10 11 16 / 67%));
    -webkit-backdrop-filter: blur(24px) saturate(155%);
    backdrop-filter: blur(24px) saturate(155%);
    box-shadow: 0 24px 70px rgb(0 0 0 / 30%), inset 0 1px 0 rgb(255 255 255 / 12%);
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.aws-feature-card::before {
    position: absolute;
    top: 0;
    left: 8%;
    width: 34%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgb(255 83 99 / 80%), transparent);
    content: "";
}

.aws-feature-card::after {
    position: absolute;
    top: -38%;
    left: -18%;
    width: 38%;
    height: 176%;
    transform: rotate(18deg);
    background: linear-gradient(90deg, transparent, rgb(255 255 255 / 3.5%), transparent);
    content: "";
    pointer-events: none;
}

.aws-feature-card::after {
    z-index: 0;
}

.feature-media,
.feature-copy {
    position: relative;
    z-index: 1;
}

.aws-feature-card:hover {
    transform: translateY(-3px);
    border-color: rgb(255 126 138 / 35%);
    box-shadow: 0 28px 78px rgb(0 0 0 / 38%), 0 0 48px rgb(255 70 87 / 9%), inset 0 1px 0 rgb(255 255 255 / 16%);
}

.aws-feature-card.feature-reverse {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
}

.feature-reverse .feature-media { order: 2; }
.feature-reverse .feature-copy { order: 1; }

.feature-media {
    position: relative;
    min-width: 0;
    margin: 0;
    padding: 7px;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 18px;
    background: linear-gradient(145deg, rgb(255 255 255 / 11%), rgb(255 255 255 / 3%));
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 18px 46px rgb(0 0 0 / 36%);
}

.feature-media::after {
    position: absolute;
    inset: 7px;
    border: 1px solid rgb(255 255 255 / 5%);
    border-radius: 12px;
    content: "";
    pointer-events: none;
}

.feature-media img,
.feature-media video {
    display: block;
    width: 100%;
    max-height: 560px;
    aspect-ratio: 16 / 10;
    object-fit: contain;
    border-radius: 12px;
    background: #090a0f;
}

.feature-media figcaption {
    padding: 11px 12px 5px;
    color: #858b9a;
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .7px;
    text-align: center;
}

.feature-copy { min-width: 0; }

.feature-number {
    display: inline-flex;
    align-items: center;
    margin-bottom: 13px;
    color: #ff7c88;
    font: 750 10px/1.5 Inter, system-ui, sans-serif;
    letter-spacing: 1.8px;
}

.aws-feature-story .feature-copy h2 {
    margin: 0 0 20px;
    color: #ff626f;
    font-size: clamp(24px, 2.5vw, 34px);
    font-weight: 850;
    letter-spacing: -.8px;
    line-height: 1.22;
    overflow-wrap: anywhere;
    text-transform: uppercase;
    text-wrap: balance;
}

.feature-body { overflow-wrap: anywhere; }

.feature-body p {
    margin: 10px 0;
    color: #b5bac5;
    font-size: 14px;
    line-height: 1.8;
}

.feature-body strong,
.feature-body b { color: #f2f3f6; font-weight: 750; }

.feature-body ul,
.feature-body ol {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.feature-body li {
    position: relative;
    padding: 10px 12px 10px 30px;
    border: 1px solid rgb(255 255 255 / 5%);
    border-radius: 11px;
    background: linear-gradient(120deg, rgb(255 255 255 / 6%), rgb(255 255 255 / 2.5%));
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: #b8bdc8;
    font-size: 13px;
    line-height: 1.7;
}

.feature-body li::before {
    position: absolute;
    top: 18px;
    left: 13px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--feature-accent);
    box-shadow: 0 0 10px rgb(255 70 87 / 45%);
    content: "";
}

.feature-body li p { margin: 0; font-size: inherit; }
.feature-body li p + p { margin-top: 7px; }
.feature-body a { color: #ff8993; overflow-wrap: anywhere; }
.feature-body code { padding: 2px 6px; border: 1px solid rgb(255 255 255 / 7%); border-radius: 5px; background: rgb(255 255 255 / 5%); color: #ffabb2; font-size: .92em; }
.feature-body pre { max-width: 100%; padding: 18px; overflow: auto; border: 1px solid rgb(255 255 255 / 7%); border-radius: 12px; background: #080a10; }
.feature-body table { display: block; max-width: 100%; overflow: auto; border-collapse: collapse; font-size: 12px; }
.feature-body th,
.feature-body td { padding: 9px 12px; border: 1px solid rgb(255 255 255 / 9%); text-align: left; }
.feature-body img,
.feature-body video { max-width: 100%; height: auto; border-radius: 10px; }

.feature-text-only,
.aws-feature-card.feature-text-only.feature-reverse { grid-template-columns: minmax(0, 1fr); }
.feature-text-only .feature-copy { width: 100%; max-width: 940px; margin: auto; }

/* Keep the existing admin content-card editor polished too. */
.content-card-field { min-width: 0; margin: 20px 0; padding: 20px; border: 1px solid rgb(255 255 255 / 10%); border-radius: 12px; background: rgb(255 255 255 / 2%); }
.content-card-field legend { padding: 0 8px; color: #ff8993; font-size: 12px; font-weight: 700; }
.content-card-actions { display: flex; justify-content: flex-end; gap: 4px; }
.content-card-actions .store-button { padding: 7px 12px; font-size: 11px; }
.content-card-preview { display: block; width: auto; max-width: 350px; max-height: 230px; margin-top: 15px; border-radius: 8px; object-fit: contain; }
.content-card-preview[hidden],
.content-card-editor template { display: none; }
.content-card-field textarea { font-size: 12px; }
.content-card-field input[type=file] { font-size: 11px; }

@media (max-width: 900px) {
    .aws-feature-card,
    .aws-feature-card.feature-reverse { grid-template-columns: minmax(0, 1fr); gap: 25px; padding: clamp(20px, 5vw, 32px); border-radius: 19px; }
    .feature-reverse .feature-media,
    .feature-reverse .feature-copy { order: initial; }
    .feature-story-heading h2 { font-size: clamp(29px, 7vw, 38px); }
    .aws-feature-story .feature-copy h2 { font-size: clamp(23px, 5vw, 30px); }
    .feature-media img,
    .feature-media video { max-height: 480px; }
}

@media (max-width: 520px) {
    .aws-feature-card,
    .aws-feature-card.feature-reverse { gap: 20px; padding: 17px; }
    .feature-body li { padding: 9px 10px 9px 27px; font-size: 12px; }
    .feature-body li::before { left: 11px; }
    .feature-media { padding: 5px; border-radius: 14px; }
    .feature-media::after { inset: 5px; border-radius: 10px; }
    .feature-media img,
    .feature-media video { border-radius: 10px; }
    .content-card-field { padding: 14px; }
    .content-card-preview { max-width: 100%; }
    .content-card-actions { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
    .aws-feature-card { transition: none; }
}

.feature-zoom{display:block;position:relative;width:100%;padding:0;border:0;background:#0b0f18;border-radius:14px;overflow:hidden;cursor:zoom-in;color:#fff}.feature-zoom img{display:block;width:100%;height:auto;max-height:560px;object-fit:contain}.feature-zoom span{position:absolute;right:12px;bottom:12px;background:#0a0d17dc;border:1px solid #ffffff30;border-radius:8px;padding:7px 12px;font:11px Arial}.feature-lightbox{padding:24px;border:1px solid #ffffff30;border-radius:18px;background:#10141e;max-width:94vw;max-height:94vh;color:white}.feature-lightbox::backdrop{background:#03050de8;backdrop-filter:blur(8px)}.feature-lightbox img{display:block;max-width:86vw;max-height:82vh;object-fit:contain}.feature-lightbox-close{position:fixed;right:3vw;top:3vh;z-index:2;border:1px solid #ffffff40;border-radius:50%;background:#161b28;color:#fff;font-size:26px;width:42px;height:42px;cursor:pointer}.feature-demo-callout{display:flex;align-items:center;justify-content:space-between;gap:32px;max-width:1290px;margin:35px auto 70px;padding:35px;border:1px solid #ff687c30;border-radius:22px;background:linear-gradient(120deg,#241521,#111725);color:#b2bbce}.feature-demo-callout h2{color:#fff;margin:10px 0;font-size:30px}.feature-demo-callout span{font:10px Arial;letter-spacing:2px;color:#ff8596}.feature-demo-callout p{max-width:700px;line-height:1.7}.feature-demo-callout a{display:inline-block;padding:15px 20px;border-radius:10px;background:#f0445d;color:white;white-space:nowrap;text-decoration:none}@media(max-width:800px){.feature-demo-callout{margin:24px 18px;flex-direction:column;align-items:stretch;padding:24px}}

/* Complete product stories: real media and compact source-based facts alternate. */
.feature-facts{min-height:240px;padding:clamp(22px,3vw,38px);background:linear-gradient(145deg,#19202bcc,#0a0d16dd);border:1px solid #ffffff18;border-radius:20px;text-align:left}.feature-facts-eyebrow{display:block;color:#ff8592;font-size:10px;letter-spacing:2px;text-transform:uppercase}.feature-facts ol{padding:0;margin:22px 0;list-style:none}.feature-facts li{display:flex;align-items:flex-start;gap:15px;border-top:1px solid #ffffff12;padding:16px 0}.feature-facts li>span{color:#ff6879;font-size:12px;font-weight:800;line-height:1.7}.feature-facts li p{margin:0;color:#e4e7ee;font-size:14px;line-height:1.7}.feature-facts small{color:#7c859a;font-size:10px}.feature-body details{border-top:1px solid #ffffff18;margin:20px 0;padding:16px 0}.feature-body summary,.feature-package-grid summary{cursor:pointer;color:#f0c6cc;font-weight:600}.feature-body details ul{margin-top:18px}.feature-inline-demo{margin:24px 0 40px;border:1px solid #ff687c35;border-radius:23px;overflow:hidden;background:#0b1019dd}.feature-demo-heading{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:clamp(22px,4vw,42px)}.feature-demo-heading h2{color:#fff;font-size:clamp(24px,3vw,34px);line-height:1.2;margin:12px 0}.feature-demo-heading p{max-width:760px;line-height:1.7;color:#aab3c5;margin:0}.feature-inline-demo button{border:1px solid #ffffff25;border-radius:9px;padding:12px 16px;color:#fff;background:#1c2435;cursor:pointer;font:600 12px/1.4 Inter,system-ui}.feature-inline-demo [data-demo-toggle]{background:#ed4056;flex-shrink:0}.feature-demo-tools{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:12px 20px;border-top:1px solid #ffffff15}.feature-demo-tools span{margin-right:auto;font-size:11px;color:#a5aec2}.feature-demo-stage{position:relative;width:100%;aspect-ratio:16/10;background:#0c111a}.feature-demo-stage iframe{position:absolute;inset:0;border:0;width:100%;height:100%;display:block}.feature-demo-stage:fullscreen{height:100vh;aspect-ratio:auto}.feature-demo-stage[hidden],.feature-demo-tools[hidden]{display:none}.feature-package-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:26px 0 45px}.feature-package-grid article{background:#111622c9;border:1px solid #ffffff15;border-radius:20px;padding:clamp(22px,3vw,36px)}.feature-package-grid h2{color:#fff;font-size:24px;margin:10px 0 20px;line-height:1.2}.feature-package-grid p,.feature-package-grid li{font-size:13px;line-height:1.8;color:#aab3c5}.feature-package-grid ul{padding-left:18px}.feature-package-grid a{display:inline-block;color:#ff8695;margin-top:20px}.feature-package-grid details{margin-top:20px}.feature-start-order{overflow-wrap:anywhere;color:#e3e8f3!important;background:#ffffff06;border-radius:9px;padding:15px}@media(max-width:800px){.feature-demo-heading{flex-direction:column;align-items:stretch}.feature-package-grid{grid-template-columns:1fr}.feature-demo-tools{flex-wrap:wrap}.feature-demo-tools span{flex-basis:100%}.feature-demo-stage{aspect-ratio:16/10}.feature-facts{min-height:0}}@media(prefers-reduced-motion:reduce){.feature-inline-demo *{scroll-behavior:auto}}