/* Shared product scenario cards: shared page edges; alternating 7/5 columns; aligned content rows. */
.sms-scenario-section{padding:var(--product-section-space,112px) var(--site-gutter);background:var(--ivory);scroll-margin-top:104px}
.sms-scenario-inner{width:min(var(--site-content-width),100%);min-width:0;margin-inline:auto}
.sms-scenario-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:40px}
.sms-scenario-heading h2{font-family:"Geist Sans",Inter,sans-serif;font-size:var(--product-heading-size,48px);font-weight:600;line-height:1.15;letter-spacing:-.03em;margin:0;color:var(--ink-deep)}
.sms-scenario-heading>div>p{font-size:14px;line-height:1.6;color:#53627b;max-width:29ch;margin:0}
.sms-scenario-caption{font-size:12px;line-height:20px;color:#586982;margin:24px 0 0}




.sms-scenario-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:stretch}
.sms-scenario{--card-ink:#010c3d;--card-muted:#435778;grid-column:span 5;color:var(--card-ink);border:0;border-radius:24px;padding:28px;display:grid;grid-template-rows:minmax(116px,auto) 238px;row-gap:16px;min-width:0;overflow:hidden}
.sms-scenario:nth-child(4n+1),.sms-scenario:nth-child(4n+4){grid-column:span 7}
.sms-scenario--sending{background:#dfeaff}.sms-scenario--reports{background:#010c3d;--card-ink:#fff;--card-muted:#c4d2ed}.sms-scenario--queue{background:#eef1f7}.sms-scenario--routing{background:#2f6ee9;--card-ink:#fff;--card-muted:#fff}
.sms-scenario-copy h3{font-family:"Geist Sans",Inter,sans-serif;font-size:26px;line-height:32px;font-weight:600;letter-spacing:-.02em;margin:0 0 12px;color:inherit}.sms-scenario-copy>p{color:var(--card-muted);font-size:14px;line-height:23px;margin:0;max-width:48ch}
.sms-scenario-visual{margin:0 -10px;width:calc(100% + 20px);height:100%;min-width:0;align-self:center;display:flex;align-items:center}.sms-scenario-visual>svg{display:block;width:100%;height:100%;font-family:inherit;overflow:visible}


@media(min-width:761px){.sms-scenario:last-child:nth-child(odd){grid-column:1/-1;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);grid-template-rows:1fr;column-gap:40px;min-height:320px}.sms-scenario:last-child:nth-child(odd) .sms-scenario-copy{grid-column:1}.sms-scenario:last-child:nth-child(odd) .sms-scenario-visual{grid-column:2;grid-row:1;max-height:270px}}
@media(min-width:761px) and (max-width:1100px){.sms-scenario-grid{gap:20px}.sms-scenario{padding:24px;grid-template-rows:minmax(116px,auto) 220px;row-gap:16px}.sms-scenario-copy h3{font-size:24px}.sms-scenario-copy>p{font-size:14px;line-height:23px}}
@media(max-width:760px){.sms-scenario-grid{grid-template-columns:minmax(0,1fr);gap:20px}.sms-scenario,.sms-scenario:nth-child(n){grid-column:auto;padding:24px;grid-template-rows:auto auto;row-gap:24px}.sms-scenario-copy h3{font-size:24px}.sms-scenario-copy>p{font-size:14px;line-height:23px}.sms-scenario-visual{height:auto;aspect-ratio:560/290}.sms-scenario--reports .sms-scenario-visual,.sms-scenario--queue .sms-scenario-visual{aspect-ratio:440/300}.sms-scenario-visual>svg{height:auto}}



/* Reporting is interface content: use the same keyline as the card copy. */
.sms-scenario--reports .sms-scenario-visual{display:grid;grid-template-rows:24px minmax(0,1fr) 14px 32px;gap:12px;margin:0;width:100%;aspect-ratio:auto}
.sms-report-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;line-height:20px;color:#c4d2ed}
.sms-report-range{padding:3px 14px;border-radius:20px;background:#172957;font-size:11px;line-height:18px;white-space:nowrap}
.sms-scenario--reports .sms-report-plot{width:100%;height:100%;min-height:0;display:block}
.sms-report-axis{display:flex;justify-content:space-between;font-size:10px;line-height:14px;color:#9fb2d5}
.sms-report-status{display:grid;grid-template-columns:6fr 2.2fr 1.5fr;gap:8px;color:#c4d2ed;font-size:11px;line-height:14px}
.sms-report-status>span::before{content:"";display:block;height:7px;margin-bottom:9px;border-radius:4px;background:#83b1ff}.sms-report-status>span:nth-child(2)::before{background:#4b6da9}.sms-report-status>span:nth-child(3)::before{background:#334367}
@media(max-width:760px){.sms-scenario--reports .sms-scenario-visual{height:230px;aspect-ratio:auto}}

@media(max-width:760px){.sms-scenario-section{padding-block:72px}.sms-scenario-heading{display:block;margin-bottom:28px}.sms-scenario-heading>div>p{margin-top:14px}.sms-scenario-caption{font-size:11px}}

/* A section-level action replaces repeated card actions. */
.sms-scenario-heading{align-items:center}
.sms-scenario-heading>div{min-width:0}.sms-scenario-heading h2{max-width:21ch;text-wrap:balance}
.sms-scenario-heading>div>p{margin-top:16px;max-width:56ch}
.product-scenario-cta{flex-shrink:0;white-space:nowrap;text-decoration:none}
.product-scenario-cta svg{width:20px;height:20px;flex:0 0 20px}
.sms-scenario{container-type:inline-size}
.sms-scenario-copy{min-width:0}
.sms-scenario-visual.sms-scenario-visual--flow{display:flex;aspect-ratio:auto;margin:0;width:100%;height:100%}
.product-scenario-flow{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;position:relative;align-items:stretch}
.product-scenario-flow::before{content:"";position:absolute;height:2px;background:#9abaff;left:10%;right:10%;top:50%}
.product-scenario-flow__node{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-height:146px;padding:20px 10px;border-radius:18px;background:#fff;color:#010c3d;text-align:center;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.product-scenario-flow__node:last-child{background:#010c3d;color:#fff}
.product-scenario-flow__icon{display:grid;place-items:center;width:44px;height:44px;background:#edf3ff;color:#2f6ee9;border-radius:14px;flex-shrink:0}
.product-scenario-flow__icon svg{width:24px;height:24px}
@container (max-width:380px){.product-scenario-flow{grid-template-columns:1fr;gap:12px}.product-scenario-flow::before{width:2px;height:auto;top:10%;bottom:10%;left:32px;right:auto}.product-scenario-flow__node{flex-direction:row;justify-content:flex-start;text-align:left;min-height:62px;padding:10px 14px;gap:14px;border-radius:14px}.product-scenario-flow__icon{width:36px;height:36px;border-radius:10px}.product-scenario-flow__node>span:last-child{font-size:13px}}
@media(max-width:760px){.product-scenario-cta{margin-top:24px;min-height:52px;font-size:16px}.sms-scenario-visual.sms-scenario-visual--flow{min-height:225px}}

.sms-scenario--reports .product-scenario-flow__node:last-child{background:#2f6ee9}

/* SMS delivery accent: keep other product palettes unchanged. */
.sms-page[data-product="sms"] .sms-report-status>span:first-child::before{background:#c7e981}

/* SMS examples: a lock screen, a coupon, and a parcel. */
.sms-object{width:100%;height:100%;min-width:0;display:grid;place-items:center;color:#071542}
.sms-object--phone{overflow:hidden;align-items:start}
.sms-object-phone{width:min(88%,290px);min-height:260px;background:#142d5b;color:#fff;border:5px solid #0a1938;border-radius:28px 28px 0 0;padding:9px 12px 22px;display:grid;align-content:start;gap:8px;text-align:center}
.sms-object-phone>i{width:36px;height:6px;border-radius:8px;background:#07132b;justify-self:center}
.sms-object-phone>span{font-size:clamp(20px,3vw,36px);font-weight:600}
.sms-object-message{display:grid;gap:4px;text-align:start;background:#f5f8ff;color:#0e2654;border-radius:13px;padding:10px 12px}
.sms-object-message b{font-size:clamp(19px,3vw,32px);letter-spacing:.08em}
.sms-object-coupon{position:relative;width:min(88%,300px);display:grid;gap:8px;padding:18px 24px;border-radius:18px;background:#c7e981;color:#18381b;transform:rotate(-5deg);box-shadow:0 12px 24px #0004}
.sms-object-coupon::before,.sms-object-coupon::after{content:"";position:absolute;top:60%;width:17px;height:17px;border-radius:50%;background:#010c3d}
.sms-object-coupon::before{left:-8px}.sms-object-coupon::after{right:-8px}
.sms-object-coupon strong{font-size:clamp(28px,4vw,53px);line-height:1}
.sms-object-coupon small{border-top:1px dashed #59763d;padding-top:8px}
.sms-object--parcel{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:12px}
.sms-object--parcel svg{width:100%;max-height:212px}
.sms-object--parcel>div{display:grid;gap:6px;justify-items:start}
.sms-object--parcel strong{font-size:clamp(16px,2vw,27px);line-height:1.15}
.sms-object--parcel span{background:#c7e981;color:#18381b;border-radius:12px;padding:4px 8px;font-size:11px}
[data-product="sms"] .sms-scenario-visual:has(.sms-object){margin:0;width:100%}
@media(max-width:760px){[data-product="sms"] .sms-scenario-visual:has(.sms-object){height:192px;aspect-ratio:auto}}
.sms-object--offer{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(10px,2vw,24px)}
.sms-object--offer .sms-object-coupon{width:94%;padding-inline:clamp(10px,1.5vw,24px)}
.sms-object--offer .sms-object-coupon strong{font-size:clamp(19px,3vw,46px)}
.sms-object-received{width:100%;min-width:0;align-self:center;border-inline-start:1px solid #9bb3dd;padding-inline-start:10px}
.sms-object--offer .sms-object-received{color:#fff;border-color:#5877b0}
.sms-object-received>div{display:flex;flex-wrap:wrap;gap:2px 8px;align-items:baseline}
.sms-object-received>div>span{background:none;padding:0;color:inherit;opacity:.8;font-size:10px}
.sms-object-received b,.sms-object-received p{font-size:12px}
.sms-object-received p{margin:4px 0 0;line-height:1.45;overflow-wrap:anywhere}
.sms-object--parcel .sms-object-received{margin-top:6px}
@media(max-width:760px){
 [data-product="sms"] .sms-scenario-visual:has(.sms-object){height:218px}
 .sms-object-coupon small{overflow-wrap:anywhere}
}
[data-product="sms"] .sms-scenario-visual:has(.sms-object){display:block}

/* Keep the visual texture local to the objects and away from card copy. */
.sms-object{position:relative;isolation:isolate}
.sms-object::before{content:"";position:absolute;z-index:-2;inset:8% 0 3%;background:radial-gradient(#3562a655 1px,transparent 1.4px) 0 0/13px 13px;mask-image:radial-gradient(ellipse at center,#000 25%,transparent 78%);pointer-events:none}
.sms-object--offer::before{background:radial-gradient(#aac6ff70 1px,transparent 1.4px) 0 0/13px 13px}
.sms-object::after{content:"";position:absolute;z-index:-1;pointer-events:none}
.sms-object--phone::after{inset:15% 12% -44%;border:1px solid #779fdf75;border-radius:50%;box-shadow:0 0 0 14px #82a5dd22}
.sms-object--offer::after{inset:18% 52% 17% 3%;border:1px solid #789bdd87;border-radius:16px;transform:rotate(7deg)}
.sms-object--parcel::after{width:48%;height:65%;left:2%;bottom:8%;border:1px dashed #719ad691;border-radius:50%;transform:rotate(-12deg)}

[data-product="sms"] .sms-scenario--sending{background:#edf1f7}
[data-product="sms"] .sms-scenario--reports{background:radial-gradient(ellipse at 20% 95%,#afcbefaa,transparent 60%),radial-gradient(ellipse at 39% 78%,#caea8055,transparent 55%),linear-gradient(90deg,#dce8f8,#eaf3ff);--card-ink:#010c3d;--card-muted:#435778}
[data-product="sms"] .sms-scenario--queue{background:#010c3d;--card-ink:#fff;--card-muted:#c4d2ed}
.sms-object--inbox,.sms-object--verification{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.sms-object--inbox .sms-object-phone{background:#f5f8fd;color:#173761;text-align:start;border-width:4px;width:min(100%,240px);align-self:start}
.sms-inbox-list{display:grid;gap:5px;width:100%}
.sms-inbox-list .sms-object-received{background:#fff;border:0;border-radius:10px;padding:7px 9px}
.sms-inbox-list .sms-object-received:last-child{opacity:.67}
.sms-object--verification>.sms-object-message{width:100%;background:#fff}
.sms-delivery{align-self:end;width:100%;min-width:0;border-radius:16px 16px 0 0;background:#526b86;padding:9px;color:white;font-size:11px}
.sms-delivery strong{display:block}
.sms-delivery>div+div{background:#f1f6ff;color:#163763;margin-top:8px;padding:8px;border-radius:9px}
.sms-delivery dl{display:flex;flex-wrap:wrap;gap:5px;margin:4px 0 0}
.sms-delivery dd{margin:0;font-weight:650}
.sms-object--offer .sms-object-coupon{box-shadow:-10px 7px #365785,10px -9px #6080ae}
.sms-object--offer .sms-object-received{position:relative;margin-inline-start:-12%;padding:9px;border:1px solid #8aabd544;border-radius:12px;background:#3e588288;backdrop-filter:blur(5px)}
@media(min-width:761px){
 [data-product="sms"] .sms-scenario:first-child{grid-column:1/-1;grid-template-columns:minmax(0,1fr) minmax(0,1.8fr);grid-template-rows:auto;min-height:320px}
 [data-product="sms"] .sms-scenario:nth-child(2){grid-column:span 7}
 [data-product="sms"] .sms-scenario:last-child:nth-child(odd){grid-column:span 5;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(116px,auto) 238px}
 [data-product="sms"] .sms-scenario:last-child:nth-child(odd) .sms-scenario-visual{grid-column:1;grid-row:2}
}
@media(max-width:760px){
 [data-product="sms"] .sms-scenario-visual:has(.sms-object--inbox){height:258px}
 .sms-object--inbox .sms-object-phone{padding-inline:5px}
}

.sms-object-coupon::before,.sms-object-coupon::after{content:none}
.sms-object--offer .sms-object-coupon{
 mask-image:radial-gradient(circle at left 65%,transparent 7px,#000 7.5px),radial-gradient(circle at right 65%,transparent 7px,#000 7.5px);
 mask-composite:intersect;
}

/* Shared type roles for product scenarios and their live artwork labels. */
.sms-scenario-section{
 --scenario-font:"Geist Sans",Inter,sans-serif;
 font-family:var(--scenario-font);
}
.sms-scenario-heading h2,.sms-scenario-copy h3,
.sms-scenario-heading>div>p,.sms-scenario-copy>p,
.sms-scenario-visual,.sms-scenario-visual *{font-family:var(--scenario-font)}
.sms-scenario-heading>div>p,.sms-scenario-copy>p{font-size:14px;font-weight:400;line-height:23px}
@media(min-width:761px){
 :is([data-product="sms"],[data-product="mms"]) .sms-scenario:first-child .sms-scenario-copy h3,
 [data-product]:not([data-product="sms"],[data-product="mms"]) .sms-scenario:last-child:nth-child(odd) .sms-scenario-copy h3{
  font-size:clamp(28px,2.4vw,34px);
  line-height:1.15;
 }
}

/* Every scenario starts its copy at the shared top and left inset. */
.sms-scenario-copy{align-self:start;justify-self:stretch}
@media(min-width:761px){
 [data-product="sms"] .sms-scenario:first-child .sms-scenario-copy{
  max-width:calc(100% - 24px);
 }
}


/* All desktop languages use the same original SVG geometry. */
[data-product="sms"] .sms-scenario .sms-scenario-source-art{display:none}
@media(min-width:761px){
 [data-product="sms"] .sms-scenario{position:relative;isolation:isolate}
 [data-product="sms"] .sms-scenario .sms-scenario-source-art{
  display:block;position:absolute;inset:0;width:100%;height:100%;
  z-index:-1;pointer-events:none;
 }
 [data-product="sms"] .sms-scenario .sms-object{
  position:absolute;width:1px;height:1px;min-height:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
 }
}