:root {
    --ink:#172331;
    --muted:#667587;
    --navy:#142c40;
    --accent:#0d887b;
    --light:#edf8f5;
    --line:#e4eaf0;
    --bg:#f6f8fb
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth
}
body {
    margin:0;
    background:var(--bg);
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Arial,sans-serif;
    color:var(--ink)
}
img.hhtht {
    width: 147px;
    margin: auto;
}
.kjbh {
    width: 100%;
    text-align: center;
    margin-bottom: 13px;
}



img.favs {
    width: 50px;
    border-radius: 50%;
}
button {
    font:inherit;
    cursor:pointer
}
.wrap {
    max-width:1120px;
    margin:auto;
    padding:0 25px
}
.top {
    background:#fff;
    border-bottom:1px solid var(--line)
}
.topin {
    min-height:81px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px
}
.brand {
    display:flex;
    align-items:center;
    gap:12px;
    font-size:17px;
    font-weight:800;
    letter-spacing:-.03em
}
.brandlogo {
    background:var(--navy);
    color:#fff;
    border-radius:13px;
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    font-size:21px
}
.headertext {
    font-size:12px;
    font-weight:650;
    color:#6c7a86
}
.tagline {
    text-align:center;
    font-size:13px;
    color:#588277;
    margin-top:30px;
    font-weight:750;
    letter-spacing:.12em;
    text-transform:uppercase
}
.heading {
    text-align:center;
    font-size:clamp(27px,4vw,42px);
    letter-spacing:-.05em;
    margin:9px auto 10px;
    line-height:1.13
}
.sub {
    text-align:center;
    color:var(--muted);
    max-width:550px;
    margin:auto auto 30px;
    line-height:1.65;
    font-size:14px
}
.hero {
    display:grid;
    grid-template-columns:1.05fr .95fr;
    overflow:hidden;
    background:#fff;
    border:1px solid var(--line);
    border-radius:23px;
    box-shadow:0 20px 60px #20364a0c
}
.left {
    padding:clamp(28px,4.3vw,59px)
}
.small {
    color:var(--accent);
    text-transform:uppercase;
    letter-spacing:.12em;
    font-weight:800;
    font-size:11px
}
.congrats {
    font-weight:850;
    font-size:clamp(30px,4vw,43px);
    letter-spacing:-.05em;
    line-height:1.14;
    margin:12px 0 13px
}
.lead {
    color:var(--muted);
    line-height:1.67;
    font-size:14px;
    margin-bottom:26px
}
.detail {
    display:flex;
    gap:12px;
    margin:14px 0;
    align-items:flex-start;
    font-size:14px
}
.symbol {
    background:var(--light);
    border-radius:10px;
    padding:9px;
    color:var(--accent)
}
.detail strong {
    display:block;
    font-size:12px;
    color:#748190;
    margin-bottom:4px
}
.detail span {
    font-weight:700
}
.cta {
    border:0;
    background:var(--accent);
    color:white;
    border-radius:11px;
    padding:16px 22px;
    font-weight:750;
    display:inline-flex;
    gap:12px;
    justify-content:center;
    align-items:center;
    box-shadow:0 9px 20px #0d887b29;
    transition:.2s
}
.cta:hover {
    background:#086e65;
    transform:translateY(-1px)
}
.left .cta {
    margin-top:22px
}
.disclaimer {
    display:block;
    color:#85909d;
    font-size:11px;
    line-height:1.6;
    margin-top:17px
}
.right {
    position:relative;
    background:radial-gradient(circle at 50% 32%,#fff 0%,#e9f3f3 58%,#dcebea 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:36px 24px;
    min-height:490px;
    flex-direction:column;
    text-align:center
}
.product-visual {
    position:relative;
    width:265px;
    max-width:100%;
    height:290px;
    filter:drop-shadow(10px 20px 17px #2c3d4652)
}
.machine {
    width:183px;
    height:222px;
    position:absolute;
    left:45px;
    top:17px;
    background:linear-gradient(92deg,#222a2f,#627079 22%,#c4d0d6 51%,#58666d 78%,#212b30);
    border:7px solid #27343b;
    border-radius:15px 15px 28px 28px;
    box-shadow:inset 8px 0 8px #ffffff3a
}
.machine:before {
    content:"";
    position:absolute;
    inset:9px 12px auto;
    background:#1d292f;
    border-radius:6px;
    height:82px
}
img.vdfdf {
    width: 50px;
    border-radius: 50px;
}
.machine:after {
    content:"";
    position:absolute;
    top:115px;
    left:33px;
    width:91px;
    height:30px;
    background:#1b292e;
    border-radius:0 0 20px 20px;
    box-shadow:0 11px 0 -4px #b7c3c9
}
.controls {
    position:absolute;
    top:37px;
    left:68px;
    display:flex;
    gap:15px
}
.controls i {
    width:20px;
    height:20px;
    border:2px solid #b5c1c6;
    border-radius:50%;
    z-index:1;
    background:#27363e
}
.cup {
    width:59px;
    height:49px;
    background:linear-gradient(90deg,#fff,#d3dfe3);
    border-radius:3px 3px 16px 16px;
    position:absolute;
    top:177px;
    left:100px;
    border-top:8px solid #59382a
}
.cup:after {
    content:"";
    position:absolute;
    border:6px solid #d4e0e4;
    width:22px;
    height:27px;
    left:49px;
    top:0;
    border-radius:50%
}
.base {
    position:absolute;
    top:233px;
    left:27px;
    width:219px;
    height:15px;
    border-radius:3px;
    background:#2c373c
}
.visual-badge {
    position:absolute;
    top:7px;
    right:8px;
    background:#fff;
    border:1px solid #dceae8;
    padding:10px 12px;
    border-radius:12px;
    color:#0d887b;
    font-size:12px;
    font-weight:800;
    transform:rotate(8deg);
    box-shadow:0 8px 25px #163a4012
}
.product-label {
    font-weight:850;
    font-size:19px;
    line-height:1.4;
    margin:6px auto 5px;
    max-width:320px
}
.product-sub {
    font-size:12px;
    color:#617d82
}
.questions {
    scroll-margin-top:25px;
    max-width:770px;
    margin:75px auto 50px
}
.sectiontop {
    text-align:center;
    font-size:12px;
    letter-spacing:.12em;
    font-weight:850;
    color:var(--accent);
    text-transform:uppercase
}
.questions h2 {
    text-align:center;
    font-size:32px;
    letter-spacing:-.04em;
    margin:9px 0
}
.questions>p {
    text-align:center;
    font-size:14px;
    color:var(--muted);
    line-height:1.6;
    margin:0 0 27px
}
.progress {
    height:6px;
    border-radius:20px;
    background:#e2e8ec;
    overflow:hidden;
    margin:0 0 26px
}
.fill {
    width:0%;
    height:100%;
    background:var(--accent);
    transition:width .35s
}
img.vdegg {
    width: 100%;
}
.qcard {
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    margin-bottom:16px;
    padding:24px;
    box-shadow:0 5px 24px #27394e06
}
.qtitle {
    font-size:15px;
    font-weight:800;
    margin:0 0 17px
}
.qnum {
    color:var(--accent);
    font-size:12px;
    margin-right:8px
}
.options {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px
}
.option {
    display:flex;
    align-items:center;
    gap:11px;
    padding:13px;
    border:1.5px solid #e3e9ee;
    border-radius:10px;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    transition:.2s
}
.option input {
    accent-color:var(--accent)
}
.option:has(input:checked) {
    background:var(--light);
    border-color:var(--accent)
}
.submitrow {
    text-align:center;
    padding-top:9px
}
.submitrow .cta {
    min-width:240px
}
.error {
    color:#bf4545;
    font-size:13px;
    min-height:20px;
    margin-top:11px
}
.stage {
    display:none;
    text-align:center;
    background:white;
    border:1px solid var(--line);
    border-radius:18px;
    padding:50px 25px;
    margin-top:22px
}
.stage.active {
    display:block
}
.spinner {
    width:56px;
    height:56px;
    border:5px solid #e1f2ef;
    border-top-color:var(--accent);
    border-radius:50%;
    animation:spin .9s linear infinite;
    margin:auto auto 21px
}
@keyframes spin {
    to {
        transform:rotate(360deg)
    }
}
.stage h3 {
    font-size:24px;
    margin:8px 0
}
.stage p {
    font-size:14px;
    line-height:1.7;
    color:var(--muted);
    max-width:450px;
    margin:12px auto 23px
}
.footer {
    text-align:center;
    border-top:1px solid var(--line);
    padding:25px;
    margin-top:60px;
    font-size:12px;
    color:#88939e
}
.hidden {
    display:none!important
}
@media(max-width:740px) {
    .wrap {
        padding:0 15px
    }
    .topin {
        min-height:68px
    }
    .headertext {
        display:none
    }
    .tagline {
        margin-top:25px
    }
    .hero {
        grid-template-columns:1fr
    }
    .left {
        padding:28px 22px
    }
    .right {
        min-height:340px;
        grid-row:1;
        padding:20px 16px
    }
    .product-visual {
        height:230px;
        transform:scale(.8);
        margin:-13px 0 -32px
    }
    .questions {
        margin-top:50px
    }
    .options {
        grid-template-columns:1fr
    }
    .qcard {
        padding:20px 16px
    }
    .questions h2 {
        font-size:27px
    }
    .cta {
        width:100%
    }
}
/* Added multi-stage experience */
body.modal-open {
    overflow:hidden
}
.modal-backdrop {
    position:fixed;
    inset:0;
    background:rgba(10,25,39,.66);
    z-index:1000;
    display:grid;
    place-items:center;
    padding:18px;
    backdrop-filter:blur(5px)
}
.modal-dialog {
    width:min(650px,100%);
    max-height:min(90vh,790px);
    overflow-y:auto;
    background:white;
    border-radius:23px;
    box-shadow:0 28px 90px #001a3163;
    padding:clamp(22px,4vw,37px)
}
.modal-heading {
    display:flex;
    justify-content:space-between;
    gap:16px;
    align-items:flex-start
}
.modal-heading h2 {
    font-size:clamp(24px,4vw,32px);
    letter-spacing:-.045em;
    margin:8px 0
}
.modal-intro {
    font-size:13px;
    line-height:1.65;
    color:var(--muted);
    margin:0 0 20px
}
.winner-list {
    display:grid;
    gap:10px
}
.winner-item {
    display:flex;
    gap:12px;
    align-items:center;
    border:1px solid var(--line);
    border-radius:13px;
    padding:13px;
    background:#fff
}
.winner-item.pending {
    background:#fff9ed;
    border-color:#f0dfb5
}
.avatar {
    width:43px;
    height:43px;
    flex:0 0 auto;
    display:grid;
    place-items:center;
    background:#e9f4f2;
    color:var(--accent);
    border-radius:50%;
    font-weight:850;
    font-size:13px
}
.winner-item.pending .avatar {
    background:#ffebc5;
    color:#9b6410
}
.winner-copy {
    flex:1;
    min-width:0
}
.winner-copy strong {
    display:block;
    font-size:13px
}
.winner-copy small {
    display:block;
    color:var(--muted);
    font-size:11px;
    margin-top:4px
}
.status {
    font-size:11px;
    font-weight:800;
    white-space:nowrap;
    color:#167e66
}
.pending .status {
    color:#9b6410
}
.notice {
    font-size:12px;
    line-height:1.65;
    margin:17px 0;
    padding:13px 15px;
    border-radius:11px;
    background:#fff8ea;
    color:#765619;
    border:1px solid #f2e4be
}
.modal-dialog .cta {
    width:100%
}
.demo-note {
    font-size:11px;
    color:#82909b;
    margin:12px 0 0;
    line-height:1.6
}
.qcard[hidden],.submitrow[hidden],.stage[hidden],.final-page[hidden],.modal-backdrop[hidden] {
    display:none!important
}
.qcard {
    animation:appear .3s ease-out
}
@keyframes appear {
    from {
        opacity:0;
        transform:translateY(8px)
    }
    to {
        opacity:1;
        transform:translateY(0)
    }
}
.quiz-step-meta {
    text-align:center;
    color:var(--accent);
    font-size:12px;
    font-weight:800;
    margin:0 0 16px
}
.final-page {
    max-width:1000px;
    margin:44px auto 60px;
    scroll-margin-top:25px
}
.final-page h2 {
    text-align:center;
    font-size:clamp(28px,4vw,39px);
    letter-spacing:-.045em;
    margin:8px 0
}
.final-sub {
    text-align:center;
    color:var(--muted);
    font-size:14px;
    margin:0 auto 28px;
    line-height:1.65
}
.final-grid {
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:22px
}
.final-visual {
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:410px;
    border-radius:20px;
    background:radial-gradient(circle at 50% 32%,#fff,#e7f3f0 65%,#dceae8);
    border:1px solid var(--line);
    padding:30px
}
.final-info {
    background:white;
    border:1px solid var(--line);
    border-radius:20px;
    padding:clamp(23px,4vw,34px)
}
.final-info h3 {
    font-size:25px;
    letter-spacing:-.04em;
    line-height:1.22;
    margin:9px 0
}
.product-spec {
    font-size:13px;
    color:var(--muted);
    line-height:1.7
}
.price-row {
    display:flex;
    align-items:baseline;
    gap:13px;
    flex-wrap:wrap;
    margin:24px 0 6px
}
.old-price {
    font-size:17px;
    text-decoration:line-through;
    color:#86919d
}
.new-price {
    font-size:33px;
    font-weight:850;
    letter-spacing:-.04em;
    color:var(--accent)
}
.offer-hint {
    font-size:11px;
    color:var(--muted)
}
.summary-line {
    border-top:1px solid var(--line);
    padding:15px 0;
    display:flex;
    gap:14px;
    justify-content:space-between;
    font-size:13px
}
.summary-line span:first-child {
    color:var(--muted)
}
.summary-line strong {
    text-align:right
}
.final-info .cta {
    width:100%;
    margin-top:17px
}
.final-footnote {
    font-size:11px;
    line-height:1.65;
    color:#85909d;
    margin-top:16px
}
.next-message {
    background:var(--light);
    border:1px solid #bcded5;
    padding:13px;
    border-radius:12px;
    font-size:12px;
    margin-top:14px;
    color:#246959
}
.hidden-before-final {
    display:none!important
}
@media(max-width:740px) {
    .modal-dialog {
        padding:22px 17px
    }
    .winner-item {
        gap:9px;
        padding:11px 9px
    }
    .status {
        font-size:10px
    }
    .final-grid {
        grid-template-columns:1fr
    }
    .final-visual {
        min-height:300px
    }
    .final-visual .product-visual {
        transform:scale(.85);
        margin:-12px 0 -24px
    }
    .final-page {
        margin-top:35px
    }
    .summary-line {
        font-size:12px
    }
}
/* Five sample comments — standalone responsive section */
.community {
    max-width:1000px;
    margin:65px auto 54px;
    scroll-margin-top:30px
}
.community-top {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:15px;
    margin-bottom:22px
}
.community-kicker {
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.16em;
    color:var(--accent);
    font-weight:800
}
.community h2 {
    font-size:clamp(25px,3.5vw,35px);
    letter-spacing:-.045em;
    margin:7px 0
}
.community-top p {
    color:var(--muted);
    font-size:13px;
    line-height:1.6;
    margin:5px 0
}
.community-count {
    color:var(--accent);
    background:var(--light);
    border-radius:100px;
    padding:9px 14px;
    font-weight:800;
    font-size:12px;
    white-space:nowrap
}
.comment-stack {
    display:grid;
    gap:12px
}
.comment {
    background:#fff;
    border:1px solid var(--line);
    border-radius:17px;
    padding:20px 22px;
    box-shadow:0 6px 25px #27394e07
}
.comment-head {
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:11px
}
.comment-avatar {
    width:45px;
    height:45px;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-weight:800;
    font-size:14px;
    flex-shrink:0
}
.comment:nth-child(5n+1) .comment-avatar {
    background:#e9edff;
    color:#536ac8
}
.comment:nth-child(5n+2) .comment-avatar {
    background:#fff1d9;
    color:#b67515
}
.comment:nth-child(5n+3) .comment-avatar {
    background:#e2f3ea;
    color:#227b55
}
.comment:nth-child(5n+4) .comment-avatar {
    background:#f8e8f3;
    color:#a55491
}
.comment:nth-child(5n+5) .comment-avatar {
    background:#e4f1fa;
    color:#2874a5
}
.comment-author {
    flex:1;
    min-width:0
}
.comment-author strong {
    font-size:14px;
    display:block
}
.comment-author small {
    color:#8492a0;
    font-size:11px
}
.comment-date {
    font-size:12px;
    color:#82919d;
    white-space:nowrap
}
.comment p {
    font-size:13px;
    color:#4f6070;
    line-height:1.75;
    margin:0 0 0 57px
}
.community-note {
    font-size:11px;
    color:#89949f;
    line-height:1.7;
    margin-top:15px
}
@media(max-width:600px) {
    .community {
        margin:48px auto
    }
    .community-top {
        align-items:start
    }
    .comment {
        padding:16px
    }
    .comment p {
        margin:0
    }
    .comment-date {
        font-size:11px
    }
    .comment-avatar {
        width:40px;
        height:40px
    }
}
/* De’Longhi standalone social layout inspired by the reference navigation. */
.social-header {
    position:sticky;
    top:0;
    z-index:100;
    background:#fff;
    border-bottom:1px solid #dce0e6;
    box-shadow:0 1px 3px #00000012
}
.fbbar {
    height:62px;
    display:grid;
    grid-template-columns:minmax(255px,1fr) minmax(350px,1.3fr) minmax(220px,1fr);
    align-items:center;
    gap:8px;
    padding:0 16px;
    max-width:1800px;
    margin:auto
}
.fb-left,.fb-center,.fb-right {
    display:flex;
    align-items:center;
    min-width:0
}
.fb-left {
    gap:8px
}
.abc-logo {
    /*width:40px;
    height:40px;*/
    border-radius:50%;
    background:#1877f2;
    color:white;
    text-decoration:none;
    display:grid;
    place-items:center;
    font-size:28px;
    font-weight:900;
    letter-spacing:-.1em;
    flex-shrink:0
}
.fb-search {
    height:40px;
    max-width:245px;
    min-width:0;
    flex:1;
    display:flex;
    align-items:center;
    gap:8px;
    background:#f0f2f5;
    color:#667085;
    border-radius:22px;
    padding:0 12px;
    font-size:13px
}
.fb-search svg {
    width:17px;
    height:17px;
    flex-shrink:0
}
.fb-center {
    justify-content:space-evenly;
    height:100%;
    gap:5px
}
.fb-tab {
    height:100%;
    flex:1;
    max-width:110px;
    display:grid;
    place-items:center;
    text-decoration:none;
    color:#606770;
    position:relative;
    border-radius:7px
}
.fb-tab svg {
    width:26px;
    height:26px
}
.fb-tab.active {
    color:#1877f2
}
.fb-tab.active:after {
    content:"";
    position:absolute;
    height:3px;
    background:#1877f2;
    bottom:0;
    left:0;
    right:0;
    border-radius:5px
}
.fb-tab:hover {
    background:#f4f6f8
}
.fb-right {
    justify-content:flex-end;
    gap:7px
}
.fb-action,.fb-avatar {
    width:40px;
    height:40px;
    flex-shrink:0;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#e4e6eb;
    color:#1d2129
}
.fb-avatar {
    background:#cbd0d8;
    color:#fff
}
.fb-action svg {
    width:20px;
    height:20px
}
#questions[hidden] {
    display:none!important
}
#questions {
    scroll-margin-top:85px;
    background:#fff;
    padding:32px;
    border-radius:20px;
    border:1px solid #e5e8ed
}
@media(max-width:1000px) {
    .fbbar {
        grid-template-columns:240px minmax(200px,1fr) auto
    }
    .fb-search span {
        display:none
    }
    .fb-search {
        max-width:42px;
        padding:0 12px
    }
    .fb-center {
        gap:0
    }
    .fb-right .fb-action:nth-last-child(n+3) {
        display:none
    }
}
@media(max-width:650px) {
    .fbbar {
        height:58px;
        padding:0 10px;
        grid-template-columns:auto 1fr auto;
        gap:7px
    }
    .abc-logo {
        width:37px;
        height:37px
    }
    .fb-search {
        width:36px;
        height:36px
    }
    .fb-center .fb-tab:nth-child(n+4) {
        display:none
    }
    .fb-tab svg {
        width:22px;
        height:22px
    }
    .fb-right .fb-action {
        display:none
    }
    .fb-avatar {
        width:34px;
        height:34px
    }
    #questions {
        padding:20px 12px;
        scroll-margin-top:70px
    }
}
  </style>
<style>
   /* De’Longhi social-feed edition: original modal rules and flow remain intact. */
:root {
    --ink:#1b2331;
    --muted:#687586;
    --navy:#153d7c;
    --accent:#206bdc;
    --light:#eef5ff;
    --line:#e2e7ef;
    --bg:#f1f4f9
}
body {
    background:var(--bg);
    font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif
}
.social-header {
    height:76px;
    background:#fff;
    border-bottom:1px solid #dfe6f0;
    position:sticky;
    top:0;
    z-index:80;
    box-shadow:0 2px 10px #1d386009
}
.social-header-inner {
    height:100%;
    max-width:1200px;
    margin:auto;
    padding:0 24px;
    display:flex;
    align-items:center;
    gap:28px
}
.social-brand {
    display:flex;
    gap:11px;
    align-items:center;
    color:#182b50;
    text-decoration:none;
    font-weight:850;
    font-size:19px;
    letter-spacing:-.035em;
    white-space:nowrap
}
.brand-mark,.author-avatar {
    background:linear-gradient(135deg,#206bdc,#1246a3);
    color:#fff;
    display:grid;
    place-items:center;
    font-weight:900;
    letter-spacing:-.09em;
    box-shadow:0 5px 13px #1855bb27
}
.brand-mark {
    width:44px;
    height:44px;
    border-radius:15px;
    font-size:23px
}
.brand-mark span,.author-avatar span {
    font-size:.55em;
    letter-spacing:-.07em;
    margin-left:-3px
}
.social-brand small {
    display:block;
    color:#8a95a5;
    font-size:10px;
    letter-spacing:.06em;
    line-height:1.3;
    text-transform:uppercase
}
.social-search {
    display:flex;
    gap:12px;
    align-items:center;
    border-radius:99px;
    background:#f2f5f9;
    color:#91a0b1;
    padding:12px 18px;
    max-width:360px;
    flex:1;
    font-size:14px
}
.social-search:first-letter {
    font-size:23px
}
.social-nav {
    margin-left:auto;
    display:flex;
    gap:10px;
    height:100%;
    align-items:stretch
}
.social-nav a {
    display:flex;
    align-items:center;
    gap:7px;
    padding:0 15px;
    color:#65768d;
    font-weight:700;
    font-size:13px;
    text-decoration:none;
    border-bottom:3px solid transparent
}
.social-nav a.nav-current {
    color:#206bdc;
    border-bottom-color:#206bdc
}
.header-bubble {
    width:40px;
    height:40px;
    background:#e8f0fc;
    color:#206bdc;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-size:12px;
    font-weight:900
}
main.wrap {
    max-width:820px;
    padding:0 16px
}
.social-post-head {
    display:flex;
    align-items:center;
    gap:12px;
    background:#fff;
    padding:24px 28px 12px;
    border:1px solid #e3e8f0;
    border-bottom:0;
    border-radius:18px 18px 0 0;
    margin-top:36px
}
.author-avatar {
    width:49px;
    height:49px;
    border-radius:50%;
    font-size:23px;
    flex:none
}
.author-info {
    flex:1
}
.author-info strong {
    font-size:15px
}
.brand-check {
    background:#2675e5;
    color:#fff;
    font-size:10px;
    width:16px;
    height:16px;
    display:inline-grid;
    place-items:center;
    border-radius:50%;
    margin-left:4px
}
.post-meta {
    margin-top:4px;
    color:#8892a1;
    font-size:12px
}
.more-icon {
    background:transparent;
    border:0;
    color:#79899d;
    font-size:24px;
    letter-spacing:2px
}
.social-copy {
    padding:4px 28px 0px;
    background:white;
    border:1px solid #e3e8f0;
    border-top:0;
    border-bottom:0
}
.social-copy>strong {
    font-size:16px
}
.social-copy p {
    line-height:1.6;
    color:#506175;
    font-size:14px;
    margin:9px 0 12px
}
.demo-label {
    font-size:11px;
    color:#6881a6;
    background:#eff5ff;
    padding:6px 10px;
    border-radius:20px;
    display:inline-block
}
.heading {
    background:white;
    border-inline:1px solid #e3e8f0;
    margin:0;
    max-width:none;
    text-align:left;
    padding:18px 28px 0;
    font-size:clamp(26px,4vw,36px);
    letter-spacing:-.045em
}
.sub {
    background:white;
    border-inline:1px solid #e3e8f0;
    margin:0;
    max-width:none;
    text-align:left;
    padding:9px 28px 22px;
    font-size:13px
}
.hero {
    border-radius:0;
    box-shadow:none;
    grid-template-columns:1fr 1fr;
    border-top:0;
    border-bottom:0
}
.hero .left {
    padding:12px 27px
}
.hero .right {
    min-height:380px;
    background:radial-gradient(circle at 50% 25%,#fff,#e9f3ff 58%,#cfe2ff);
    padding:17px
}
.hero .congrats {
    font-size:clamp(25px,3.8vw,34px)
}
.hero .lead {
    margin-bottom:19px
}
.hero .product-visual {
    transform:scale(.83);
    margin:-16px 0 -22px
}
.hero .visual-badge {
    color:#206bdc
}
.cta {
    background:#206bdc;
    box-shadow:0 9px 20px #206bdc29
}
.cta:hover {
    background:#1456bd
}
.symbol {
    background:#e9f2ff;
    color:#206bdc
}
.social-stats {
    background:white;
    padding:14px 26px;
    display:flex;
    justify-content:space-between;
    color:#7a8798;
    border:1px solid #e3e8f0;
    border-top:0;
    font-size:12px
}
.social-stats a {
    color:#6b7b91;
    text-decoration:none
}
.reaction-icons {
    color:#206bdc;
    font-size:14px;
    letter-spacing:-4px;
    margin-right:8px
}
.social-actions {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    background:white;
    padding:6px 18px;
    border-radius:0 0 18px 18px;
    border:1px solid #e3e8f0;
    border-top:1px solid #eef1f5
}
.social-actions button {
    padding:13px;
    border:0;
    background:transparent;
    color:#61718a;
    font-weight:750;
    font-size:14px;
    border-radius:9px
}
.social-actions button:hover,.social-actions button.is-liked {
    background:#ecf3ff;
    color:#206bdc
}
.social-actions button span {
    font-size:18px;
    margin-right:5px
}
.share-note {
    background:#e9f5ff;
    padding:11px;
    border-radius:10px;
    color:#225ba1;
    font-size:12px
}
.questions {
    margin:22px auto 0;
    background:#fff;
    border:1px solid #e3e8f0;
    border-radius:18px;
    padding:32px 32px 26px;
    max-width:none
}
.questions h2 {
    font-size:27px
}
.questions>p {
    font-size:13px
}
.qcard {
    background:#f8faff;
    border-color:#e3eaf5;
    box-shadow:none
}
.option {
    background:white
}
.option:has(input:checked) {
    background:#eaf3ff
}
.final-page {
    margin:25px 0 30px
}
.final-info,.final-visual {
    box-shadow:0 2px 18px #20334d09
}
.final-grid {
    grid-template-columns:.85fr 1.15fr
}
.new-price {
    color:#206bdc
}
.community {
    margin:22px auto 40px;
    background:#fff;
    border:1px solid #e3e8f0;
    border-radius:18px;
    padding:26px 26px 20px;
    max-width:none
}
.community-top {
    margin-bottom:15px
}
.community h2 {
    font-size:24px
}
.community-count {
    background:#edf4ff;
    color:#206bdc
}
.comment-stack {
    gap:17px
}
.comment {
    border:0;
    box-shadow:none;
    padding:0
}
.comment-head {
    margin:0 0 0 0;
    gap:10px
}
.comment-avatar {
    width:40px;
    height:40px
}
.comment-author {
    flex:0 1 auto;
    background:#f1f4f9;
    border-radius:17px 17px 0 0;
    padding:11px 15px 3px
}
.comment-author strong {
    font-size:13px
}
.comment-author small {
    font-size:10px
}
.comment-date {
    align-self:center;
    margin-left:auto
}
.comment p {
    margin:0 0 0 50px;
    background:#f1f4f9;
    border-radius:0 0 17px 17px;
    padding:4px 15px 13px;
    font-size:13px;
    line-height:1.6
}
.community-note {
    border-top:1px solid #eef1f5;
    padding-top:14px
}
.footer {
    border-top:0;
    margin-top:0;
    padding:20px 14px 40px
}
@media(max-width:740px) {
    .social-header {
        height:62px
    }
    .social-header-inner {
        padding:0 14px;
        gap:10px
    }
    .social-search {
        display:none
    }
    .social-brand {
        font-size:17px
    }
    .brand-mark {
        width:37px;
        height:37px;
        font-size:19px
    }
    .social-nav a {
        padding:0 9px;
        font-size:13px
    }
    .social-nav a span {
        display:none
    }
    .header-bubble {
        display:none
    }
    .social-post-head {
        padding:17px 16px 12px;
        margin-top:15px
    }
    .social-copy {
        padding:4px 16px 15px
    }
    .heading {
        padding:16px 16px 0
    }
    .sub {
        padding:8px 16px 18px
    }
    .hero {
        grid-template-columns:1fr
    }
    .hero .right {
        grid-row:1;
        min-height:320px
    }
    .hero .left {
        padding:25px 20px
    }
    .social-stats {
        padding:13px 16px
    }
    .questions {
        padding:25px 16px
    }
    .community {
        padding:22px 14px
    }
    .community-top {
        align-items:start
    }
    .community-count {
        font-size:11px
    }
    .comment-author {
        flex:1
    }
    .comment-date {
        white-space:normal;
        font-size:10px;
        max-width:82px;
        text-align:right
    }
    .comment p {
        margin-left:50px
    }
}
[hidden] {
    display:none!important
}
#introStage[hidden],#community[hidden] {
    display:none!important
}