/* Approved iPhone and TON illustrations. All selectors are scoped to the feature section. */
@font-face {
    font-family:  "Feature Denim";
    src:  url("/assets/feature-stories/denim-semibold.woff") format("woff");
    font-style:  normal;
    font-weight:  600;
    font-display:  swap;
}

.feature-stories {
    --bg: #12141b;
    --fg: #f5f0e0;
    --fg-muted: #98a5bb;
    --screen: #1a1f2d;
    --surface: #222c3d;
    --card-gradient: linear-gradient(135deg, #195cc3 0%, #2d80eb 55%, #79bdfa 100%);
    --ink:  #060609;
    --font:  -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --headline:  "Feature Denim", var(--font);
    --tail:  url("/assets/feature-stories/telegram-tail.svg");
    padding:  76px 0 60px;
    background:  var(--bg);
    color:  var(--fg);
    font-family:  var(--font);
    line-height:  normal;
    scroll-margin-top:  80px;
}

.feature-stories-inner {
    max-width:  1352px;
    margin:  0 auto;
    padding:  0 54px;
}

.feature-stories-heading {
    margin:  0;
    text-align:  center;
    font:  600 clamp(34px, 3.4vw, 49px) / 1.02 var(--headline);
    letter-spacing:  -1.45px;
}

.feature-stories-heading span {
    display:  block;
    color:  var(--accent);
    margin-top:  7px;
}

.feature-stories-note {
    margin:  25px 0 0;
    color:  var(--fg-muted);
    text-align:  center;
    font-size:  12px;
}

.feature-stories a:focus-visible {
    outline:  2px solid #0056b5;
    outline-offset:  3px;
}

.story-gallery {
    display:  grid;
    grid-template-columns:  repeat(3,minmax(0,1fr));
    gap:  20px;
    margin-top:  61px;
}

.story-card {
    margin:  0;
    min-width:  0;
}

.story-tile {
    color:  var(--ink);
    aspect-ratio:  400/464;
    width:  100%;
    position:  relative;
    overflow:  hidden;
    border-radius:  48px;
    isolation:  isolate;
    background:  var(--card-gradient);
    container-type:  inline-size;
}

.story-canvas {
    width:  400px;
    height:  464px;
    position:  absolute;
    left:  0;
    top:  0;
    transform:  scale(var(--story-scale, 1));
    transform-origin:  top left;
    opacity:  0;
    transition:  opacity .2s;
}

.story-tile.story-ready .story-canvas {
    opacity:  1;
}

.story-caption {
    font:  600 clamp(20px,1.85vw,27px)/1.09 var(--headline);
    letter-spacing:  -.55px;
    text-align:  center;
    margin:  23px 0 0;
}

.story-caption span {
    display:  block;
}

.story-meta {
    display:  flex;
    justify-content:  flex-end;
    align-items:  center;
    gap:  4px;
    font-size:  10px;
    line-height:  12px;
    color:  #82a389;
    margin:  4px 0 0;
}

.story-checks {
    width:  16px;
    height:  12px;
    object-fit:  contain;
}

.story-tools-head {
    position:  absolute;
    top:  36px;
    width:  100%;
    text-align:  center;
    color:  #f2f6ff;
    font:  italic 600 35px/1.04 var(--font);
    letter-spacing:  -1.65px;
}

.story-tools-head span {
    display:  block;
    font-size:  15px;
    font-weight:  400;
    letter-spacing:  -.2px;
    margin-top:  8px;
    font-style:  normal;
    color:  #bed8f9;
}

.story-app-fan {
    position:  absolute;
    inset:  0;
    perspective:  1100px;
}

.story-app-sheet {
    position:  absolute;
    width:  195px;
    height:  332px;
    border-radius:  29px 29px 0 0;
    background:  linear-gradient(160deg,#28364b 0%,#1a2535 100%);
    color:  #f5f0e0;
    border:  1px solid #9fbce330;
    box-shadow:  0 1px 0 #c4daf018 inset,0 12px 30px #09172d55;
    padding:  24px 23px;
    transform-origin:  50% 100%;
    transition:  transform .55s cubic-bezier(.2,.8,.2,1);
}

.story-app-sheet .story-app-image {
    width:  73px;
    height:  73px;
    border-radius:  18px;
    background:  #35435a;
    box-shadow:  0 0 0 1px #b3ccec25;
    display:  grid;
    place-items:  center;
    overflow:  hidden;
    margin:  0 0 22px;
}

.story-app-sheet img {
    width:  54px;
    height:  54px;
    object-fit:  contain;
}

.story-app-sheet strong {
    font:  600 27px/1.12 var(--headline);
    letter-spacing:  -.65px;
    display:  block;
    margin-bottom:  8px;
}

.story-app-sheet p {
    font-size:  18px;
    line-height:  24px;
    color:  #b0bed3;
    letter-spacing:  -.43px;
    margin:  0;
}

.story-app-sheet.story-back {
    left:  57px;
    top:  229px;
    transform:  rotate(-10deg);
    z-index:  1;
}

.story-app-sheet.story-mid {
    left:  153px;
    top:  178px;
    transform:  rotate(-2deg);
    z-index:  2;
}

.story-app-sheet.story-front {
    left:  250px;
    top:  136px;
    transform:  rotate(10deg);
    z-index:  3;
}

.story-tools-tile:hover .story-back {
    transform:  translate(-11px,-6px) rotate(-14deg);
}

.story-tools-tile:hover .story-mid {
    transform:  translate(-2px,-8px) rotate(-3deg);
}

.story-tools-tile:hover .story-front {
    transform:  translate(10px,-10px) rotate(13deg);
}

@media(max-width:1100px) {
    .story-tile {
        border-radius:  38px;
    }

    .story-gallery {
        gap:  16px;
        margin-top:  49px;
    }
}

@media(max-width:780px) {
    .story-gallery {
        grid-template-columns:  1fr;
        gap:  44px;
        max-width:  430px;
        margin:  40px auto 0;
    }

    .story-tile {
        border-radius:  44px;
    }

    .story-caption {
        font-size:  26px;
        margin-top:  20px;
    }
}

.story-yolo-title {
    display:  block;
    font-size:  18px;
    line-height:  23px;
    letter-spacing:  -.5px;
    font-weight:  650;
    margin-bottom:  6px;
}

.story-yolo-app-link {
    position:  relative;
    display:  flex;
    justify-content:  center;
    align-items:  center;
    min-height:  46px;
    background:  #1689ea;
    color:  #fff;
    border-radius:  26px;
    padding:  11px 32px;
    margin-top:  10px;
    font-size:  17px;
    font-weight:  550;
    line-height:  21px;
    text-align:  center;
}

.story-yolo-app-link b {
    position:  absolute;
    top:  5px;
    right:  11px;
    font-size:  11px;
    line-height:  12px;
    font-weight:  500;
}

.story-yolo-app-link:hover {
    background:  #0e78d4;
}

@media (max-width: 1100px) {
    .feature-stories-inner {
        padding:  0 32px;
    }

    .feature-stories-heading {
        font-size:  40px;
    }
}

@media (max-width: 780px) {
    .feature-stories {
        padding:  54px 0;
    }

    .feature-stories-inner {
        padding:  0 25px;
    }

    .feature-stories-heading {
        font-size:  36px;
    }
}

.story-phone-preview {
    padding: 33px 0 45px;
}

.story-phone-preview .feature-stories-heading {
    font-size: 38px;
}

.story-phone-gallery {
    margin-top: 27px;
    align-items: start;
}

.story-mockup-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 400/464;
    overflow: hidden;
    border-radius: 48px;
}

.story-mockup-canvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 400px;
    height: 464px;
    transform: scale(var(--mockup-scale, 1));
    transform-origin: top left;
}

.story-mockup-canvas>.story-tile,
.story-phone-backdrop {
    position: absolute;
    left: 0;
    top: 0;
    width: 400px;
    height: 464px;
    border-radius: 48px;
    overflow: hidden;
}

.story-phone-backdrop {
    background: var(--card-gradient);
}

.story-mockup-canvas>.story-tile .story-canvas {
    transform: none;
    opacity: 1;
}

.story-iphone {
    position: absolute;
    width: 402px;
    height: 874px;
    left: 43.22px;
    top: 52px;
    transform: scale(.78);
    transform-origin: top left;
    isolation: isolate;
    color: #111;
}

.story-iphone-screen {
    position: absolute;
    inset: 0;
    border-radius: 60px;
    overflow: hidden;
    background: var(--screen);
    color: #f1f4fa;
}

.story-iphone-bezel {
    position: absolute;
    left: -24px;
    top: -23px;
    width: 450px;
    height: 920px;
    max-width: none;
    z-index: 9;
    pointer-events: none;
    filter: drop-shadow(0 14px 23px #07152738);
}

.story-phone-status {
    position: absolute;
    left: 0;
    top: 0;
    width: 402px;
    height: 62px;
    padding: 21px 29px 19px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #f1f4fa;
    background: var(--screen);
    font-size: 17px;
    font-weight: 590;
    line-height: 22px;
    letter-spacing: -.3px;
}

.story-phone-status>span {
    width: 82px;
    text-align: center;
}

.story-phone-status>div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 82px;
}

.story-phone-status img {
    object-fit: contain;
    display: block;
    filter: invert(1);
}

.story-phone-nav {
    position: absolute;
    top: 62px;
    left: 0;
    right: 0;
    height: 64px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 4px 16px 14px;
    background: var(--screen);
    z-index: 3;
}

.story-phone-back,
.story-phone-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--surface);
    box-shadow: 0 1px 0 #a3c0e215 inset;
}

.story-phone-back img {
    width: 27px;
    height: 27px;
    object-fit: contain;
}

.story-phone-avatar {
    position: relative;
    overflow: hidden;
}

.story-phone-avatar img {
    position: absolute;
    left: -4px;
    top: -10px;
    width: 180px;
    height: 64.2px;
    max-width: none;
    border-radius: 0;
    clip-path: inset(0 138px 0 0);
}

.story-phone-contact {
    padding-top: 3px;
    flex: 1;
    min-width: 0;
    text-align: center;
    font-size: 17px;
    line-height: 21px;
}

.story-phone-contact strong {
    font-weight: 590;
    display: block;
    letter-spacing: -.35px;
}

.story-phone-contact>span {
    display: block;
    font-size: 13px;
    line-height: 18px;
    color: #8d9bb2;
    margin-top: 1px;
}

.story-phone-thread {
    position: absolute;
    left: 0;
    right: 0;
    top: 128px;
    padding: 0 14px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
}

.story-phone-day {
    align-self: center;
    display: block;
    background: #293449;
    border-radius: 100px;
    color: #9eacc3;
    font-size: 11px;
    line-height: 16px;
    font-weight: 500;
    padding: 1px 7px;
    letter-spacing: -.1px;
}

.story-phone-message {
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.story-phone-message.story-sent {
    justify-content: flex-end;
}

.story-phone-bubble {
    --bubble-fill: #222c3d;
    position: relative;
    max-width: 342px;
    min-width: 0;
    background: var(--bubble-fill);
    color: #f0f4fc;
    border-radius: 18px;
    padding: 6px 11px;
    font-size: 17px;
    line-height: 22px;
    letter-spacing: -.43px;
    box-shadow: 0 .8px 0 #8bafb112;
    font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
}

.story-phone-bubble::before {
    content: "";
    position: absolute;
    left: -6px;
    bottom: 0;
    width: 14px;
    height: 34px;
    background: var(--bubble-fill);
    mask: var(--tail) center/100% 100% no-repeat;
    -webkit-mask: var(--tail) center/100% 100% no-repeat;
}

.story-phone-message.story-sent .story-phone-bubble {
    --bubble-fill: #2b5278;
}

.story-phone-message.story-sent .story-phone-bubble::before {
    left: auto;
    right: -6px;
    transform: scaleX(-1);
}

.story-phone-bubble p {
    margin: 0;
}

.story-phone-bubble strong {
    font-weight: 650;
}

.story-phone-bubble .story-meta {
    font-size: 10px;
    line-height: 12px;
    color: #91a3ae;
    margin: 3px 0 0;
}

.story-phone-message.story-sent .story-meta {
    color: #8fbbdf;
}

.story-phone-bubble .story-checks {
    width: 18px;
    height: 13px;
}

.story-phone-bubble .story-profit-heading {
    display: block;
    font-size: inherit;
    color: inherit;
    font-weight: 650;
    line-height: inherit;
    margin-bottom: 4px;
    letter-spacing: inherit;
}

.story-phone-bubble .story-yolo-title {
    font-size: 19px;
    line-height: 24px;
    font-weight: 650;
    letter-spacing: -.5px;
    margin-bottom: 6px;
}

.story-phone-bubble .story-yolo-app-link {
    position: relative;
    margin-top: 10px;
    min-height: 46px;
    font-size: 17px;
    line-height: 22px;
    border-radius: 26px;
    padding: 10px 32px;
    background: #1689ea;
    text-decoration: none;
}

.story-phone-bubble .story-yolo-app-link b {
    font-size: 12px;
    line-height: 13px;
    right: 12px;
    top: 6px;
}

.story-phone-bubble .story-yolo-app-link:hover {
    background: #0e78d4;
}

.story-phone-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 112px;
    background: linear-gradient(transparent,#f4f9fc70 50%,#f4f9fca6);
}

.story-phone-composer {
    position: absolute;
    left: -12px;
    bottom: 6px;
    width: 426px;
    height: 114px;
    max-width: none;
    pointer-events: none;
}

.story-home-indicator {
    position: absolute;
    left: 50%;
    bottom: 8px;
    translate: -50% 0;
    width: 134px;
    height: 5px;
    border-radius: 100px;
    background: #141719;
}

.story-phone-preview .story-caption {
    margin-top: 17px;
}

@media(max-width:1100px) {
    .story-phone-preview .story-caption {
        font-size: 23px;
    }
}

@media(max-width:780px) {
    .story-phone-preview .feature-stories-heading {
        font-size: 33px;
    }

    .story-phone-gallery {
        gap: 40px;
    }

    .story-phone-preview .story-caption {
        font-size: 26px;
    }
}

@media(max-width:1100px) {
    .story-mockup-stage {
        border-radius: 38px;
    }
}

@media(max-width:780px) {
    .story-mockup-stage {
        border-radius: 44px;
    }
}