@charset "UTF-8";

/* ==========================================================================
   Cisdem Duplicate Finder — customer story page
   Used by: duplicate-finder/alyssa-bock.html, byu.html, mylapo.html

   The only page-specific stylesheet these pages load. The rules they used from
   duplicate-finder.css, duplicate-photo-finder.css and use-cases.css are copied
   into the "Shared rules" blocks below, in the order those files were loaded,
   so the story pages keep the same palette (--ink, --muted, --line), banners,
   related-story cards and video lightbox.
   ========================================================================== */

/* ---------- Shared rules · from duplicate-finder.css ---------- */
@media (min-width: 768px) and (max-width: 1024px) {
    .header-banner .review-star {
        margin-left: 10px;
    }
}

@media (max-width: 1023px) {
    .header-banner .platform-icons .win:hover {
        content: url("../../images/common/win-green.png");
    }

    .header-banner .platform-icons .mac:hover {
        content: url("../../images/common/mac-green.png");
    }

    .header-banner .platform-icons .android:hover {
        content: url("../../images/common/android-green.png");
    }

    .header-banner .platform-icons .ios:hover {
        content: url("../../images/common/ios-green.png");
    }

    .product-button .menu-down-btn img {
        margin-right: 0px !important;
    }
}

/* ---------- Shared rules · from duplicate-photo-finder.css (.photo-header / .photo-footer banners) ---------- */
.photo-header {
    padding-top: 32px;
}

.photo-header .text-area {
    padding-top: 8px;
}

.photo-header h1 {
    max-width: 520px;
    font-size: 36px;
    line-height: 1.2;
}

.photo-header .hero img {
    max-width: 80%;
    height: auto;
    display: block;
    margin: 0 auto 10px;
}

.photo-footer {
    padding-top: 40px;
    padding-bottom: 76px;
}

.photo-footer .text {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 1024px) {
    .photo-header h1 {
        font-size: 30px;
        max-width: 100%;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .photo-header {
        padding-top: 22px;
    }
}

@media (max-width: 767px) {
    .photo-header {
        padding-top: 10px;
    }

    .photo-header .text-area {
        padding-top: 0;
    }

    .photo-header h1 {
        font-size: 26px;
    }

    .photo-header .hero img {
        max-width: 100%;
        margin: 0 auto 10px;
    }

    .photo-footer {
        padding-top: 24px;
        padding-bottom: 48px;
    }

    .photo-footer .footer-title {
        font-size: 22px;
    }

    .photo-footer .text {
        font-size: 14px;
    }
}

/* ---------- Shared rules · from use-cases.css (palette, base reset, .kicker, related-story cards, video lightbox) ---------- */
:root {
    --ink: #202434;
    --muted: #65717f;
    --line: #dce7f2;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Montserrat",Arial,Helvetica,sans-serif;
    color: var(--ink);
    background: #fff;
    line-height: 1.55;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
}

button {
    font: inherit;
}

.story-stats {
    display: flex;
    gap: 54px;
    flex-wrap: wrap;
    margin-top: 54px;
}

@media (max-width:680px) {
    .story-stats {
        gap: 26px;
        margin-top: 34px;
    }
}

.header-banner .lead {
    margin: 0 0 18px;
    font-size: 16px;
    line-height: 1.75;
    color: #333;
    max-width: 580px;
}

/* The tablet banner stacks and centres its copy, so the lead's box needs auto
   side margins to sit on the same axis as the title and buttons, and the 580px
   width cap is lifted so the paragraph spans the same column as
   duplicate-finder.html. Kept after the base rule above: same specificity, so
   it has to come later to override the horizontal margins. Desktop (>=1025px)
   and phones (<=767px) keep their 580px measure. */
@media (min-width: 768px) and (max-width: 1024px) {
    .header-banner .lead {
        max-width: none;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
}

.vmodal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(10,18,34,.82);
    padding: 20px;
}

.vmodal.show {
    display: flex;
}

.vmodal-box {
    position: relative;
    width: min(900px,94vw);
    background: #000;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 34px 90px rgba(0,0,0,.5);
}

.vmodal-box iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
    border: 0;
    background: #000;
}

.vmodal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    color: #111;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    z-index: 2;
}

.vmodal-close:hover {
    background: #fff;
}

.vmodal-bottom {
    display: flex;
    justify-content: center;
    padding: 9px 12px;
    background: #000;
}

.vmodal-bottom a {
    color: #aac4ff;
    font-size: 13px;
    text-decoration: none;
    border-bottom: 1px solid rgba(170,196,255,.4);
}

.vmodal-bottom a:hover {
    color: #fff;
}

.case {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(44,96,150,.07);
    transition: transform .25s ease,box-shadow .25s ease;
}

.case:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 44px rgba(44,96,150,.13);
}

.case-media {
    position: relative;
    height: 230px;
    overflow: hidden;
    background: #dceaff;
}

.case-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
    transition: transform .5s ease;
}

.case:hover .case-media img {
    transform: scale(1.05);
}

.case-body {
    padding: 20px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.case-body h3 {
    margin: 0;
    font-size: 19px;
    line-height: 1.3;
    font-weight: 700;
    text-align: left;
}

.case-more {
    margin-left: auto;
    font-size: 13px;
    font-weight: 700;
    color: #2b8af0;
    flex: none;
    white-space: nowrap;
    text-decoration: none;
}

.case-more:hover {
    text-decoration: underline;
}

.case-more::after {
    content: " →";
}

@media (max-width:420px) {
    .header-banner h1 {
        font-size: 23px;
        line-height: 1.3;
    }

    .header-banner .lead {
        font-size: 15px;
    }

    .case-body {
        padding: 16px;
    }

    .case-body h3 {
        font-size: 17px;
    }

    .footer-banner .footer-title {
        font-size: 22px;
    }

    .vmodal-box iframe {
        aspect-ratio: 16/9;
    }
}

@media (min-width: 768px) {
    .photo-footer {
        padding-top: 80px;
    }
}

@media (max-width: 767px) {
    .case-body h3 {
        font-size: 16px;
    }

    /* iPad mini and phones use the stacked banner: centre the whole hero
       block (badge, title, lead, buttons, platform row) like the tablet layout. */
    .header-banner .lead {
        max-width: 580px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .header-banner .app-product {
        justify-content: center;
    }

    .header-banner h1 {
        text-align: center;
    }

    .header-banner .buttons {
        text-align: center;
    }

    .header-banner .platform-icons {
        align-items: center;
    }

    .header-banner .platform-left,
    .header-banner .review-star {
        justify-content: center;
        text-align: center;
    }
}

.story-wrap {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}

/* ---------- Part 0 · banner artwork (byu.html) ---------- */
/* byu.html's headline runs a line longer than its siblings', so its banner row
   is taller than the artwork and the art used to sit stranded at the top. Keep
   the shared .photo-header sizing - same 80% box alyssa-bock and mylapo use, so
   the three banners stay in step - and centre it against the copy instead.
   Only the two-column layout (>=1025px) has a row taller than its content. */
@media (min-width: 1025px) {
    .header-banner.byu-header .hero {
        align-self: stretch;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .header-banner.byu-header .hero img {
        margin: 0 auto;
    }

    /* formtek.html's artwork is a transparent PNG whose circle sits low
       inside its box; lift it so it reads level with the copy column. */
    .header-banner.formtek-header .hero img {
        transform: translateY(-32px);
    }
}

/* ---------- Part 1 · quote, author and result in one block ---------- */
.story-hero {
    padding: 76px 0 88px;
    background: linear-gradient(180deg, #fff 0%, #f6fbff 58%, #eef7ff 100%);
}

/* the result strip: three figures split by hairlines - under the quote on a
   full story page, or standing on its own in a Results section */
.story-hero__stats,
.story-stats__strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 26px;
    padding: 36px 44px 34px;
    border: 1px solid #dceafa;
    border-radius: 24px;
    background: linear-gradient(165deg, #eaf5ff 0%, #f8fcff 100%);
    box-shadow: 0 16px 40px rgba(44, 96, 150, .09);
}

.hero-stat {
    padding: 0 34px;
    text-align: center;
    border-left: 1px solid #cfe3f7;
}

.hero-stat:first-child {
    padding-left: 0;
    border-left: 0;
}

.hero-stat:last-child {
    padding-right: 0;
}

.hero-stat__num {
    display: block;
    font-size: clamp(34px, 3.8vw, 46px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
    color: #2b8af0;
}

.hero-stat__num em {
    margin-left: 2px;
    font-style: normal;
    font-size: .5em;
    font-weight: 800;
    letter-spacing: 0;
}

.hero-stat__label {
    display: block;
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.5;
    color: #5c6b7a;
    /* labels are short: balance the two lines instead of leaving an orphan */
    text-wrap: balance;
}

/* ---------- Part 1b · the results strip as a section of its own ---------- */
/* mylapo.html opens with the figures rather than a quote, so the strip needs
   its own section: the same soft gradient the intro uses, picking up the white
   the banner ends on and handing #eef7ff to whatever follows */
.story-stats {
    /* the shared rule above (from use-cases.css) leaves this class a 54px top margin for its inline row of
       figures. Here the strip is a section of its own, directly under the
       banner, where that margin only stacks on the padding and leaves a hole
       between the download buttons and the card. */
    margin-top: 0;
    padding: 48px 0 88px;
    background: linear-gradient(180deg, #fff 0%, #f6fbff 58%, #eef7ff 100%);
}

/* nothing sits above the strip here, so the section's own padding is the gap -
   the 26px the shared rule leaves room for under the quote would double it */
.story-stats__strip {
    margin-top: 0;
}

/* The hero's testimonial opens its section, so it sits flush at the top rather
   than carrying the 34px the base rule leaves for a quote that follows copy. */
.story-hero .pullquote {
    margin-top: 0;
}

/* ---------- Part 2 · customer at a glance ---------- */
.story-glance {
    padding: 0 0 88px;
    /* continues the light blue the intro fades into, then returns to white */
    background: linear-gradient(180deg, #eef7ff 0%, #fff 46%);
}

/* the centred section head, shared by the glance card, the story sections and
   the closing "why" grid: title, then a short gradient rule under it. The
   related-cases head takes the title and centring but not the rule - it
   carries a line of copy under the title instead */
.story-meet__head,
.story-challenge__head,
.story-solution__head,
.story-results__head,
.story-next__head,
.story-glance__head,
.story-interview__head,
.story-outcome__head,
.story-related__head {
    margin: 0 auto 38px;
    text-align: center;
}

.story-meet__head h2,
.story-challenge__head h2,
.story-solution__head h2,
.story-results__head h2,
.story-next__head h2,
.story-glance__head h2,
.story-interview__head h2,
.story-outcome__head h2,
.story-related__head h2 {
    margin: 0;
    font-size: clamp(27px, 3vw, 35px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.015em;
    color: var(--ink);
}

.story-meet__head h2::after,
.story-challenge__head h2::after,
.story-solution__head h2::after,
.story-results__head h2::after,
.story-next__head h2::after,
.story-glance__head h2::after,
.story-interview__head h2::after,
.story-outcome__head h2::after {
    content: "";
    display: block;
    width: 64px;
    height: 4px;
    margin: 20px auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #3495f2, #63b8ff);
}

/* On tablet and phone widths the story copy reads left-aligned, so the section
   headings and the short gradient rule under them start at the left edge too. */
@media (max-width: 1024px) {
    .story-meet__head,
    .story-challenge__head,
    .story-solution__head,
    .story-results__head,
    .story-next__head,
    .story-glance__head,
    .story-interview__head,
    .story-outcome__head,
    .story-related__head,
    .story-routine__head {
        text-align: left;
    }

    .story-meet__head h2,
    .story-challenge__head h2,
    .story-solution__head h2,
    .story-results__head h2,
    .story-next__head h2,
    .story-glance__head h2,
    .story-interview__head h2,
    .story-outcome__head h2,
    .story-related__head h2,
    .story-routine__head h2 {
        text-align: left;
    }

    .story-meet__head h2::after,
    .story-challenge__head h2::after,
    .story-solution__head h2::after,
    .story-results__head h2::after,
    .story-next__head h2::after,
    .story-glance__head h2::after,
    .story-interview__head h2::after,
    .story-outcome__head h2::after,
    .story-routine__head h2::after {
        margin-left: 0;
        margin-right: auto;
    }
}

.glance-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 64px;
    margin: 0;
    padding: 40px 44px;
    border: 1px solid #dceafa;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(44, 96, 150, .09);
}

.glance-item {
    padding: 24px 0;
    border-top: 1px dashed #e3ebf3;
}

/* the first row sits flush against the card padding, with no divider above it */
.glance-item:nth-child(1),
.glance-item:nth-child(2) {
    padding-top: 0;
    border-top: 0;
}

.glance-item--wide {
    grid-column: 1 / -1;
}

.glance-item:last-child {
    padding-bottom: 0;
}

.glance-item dt {
    margin: 0 0 9px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #5a7fa5;
}

.glance-item dd {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.45;
    color: #202536;
}

.glance-note {
    font-weight: 500;
    color: #7b8794;
}

.glance-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.glance-chips span {
    padding: 8px 15px;
    border: 1px solid #d9ebff;
    border-radius: 999px;
    background: #f1f8ff;
    color: #2778c9;
    font-size: 14px;
    font-weight: 700;
}

/* ---------- meet the customer (mylapo) ---------- */
/* the plain-prose introduction: the glance card's background has already faded
   back to white, so this only needs to run out to the next section */
.story-meet {
    padding: 0 0 88px;
    background: #fff;
}

/* the customer's own mark, centred above the section title. Sits on the white
   the glance card fades back to, so the transparent PNG needs no plate */
.story-meet__logo {
    display: block;
    width: 72px;
    height: 72px;
    margin: 0 auto 18px;
    object-fit: contain;
}

/* On tablet and phone widths the logo sits above a left-aligned title, so it
   starts at the same left edge instead of centring over the copy. */
@media (max-width: 1024px) {
    .story-meet__logo {
        margin-left: 0;
        margin-right: auto;
    }
}

/* body copy matches the interview answers, so the two read as one voice. Shared
   by the introduction and the challenge section's opening and closing lines */
.story-prose p {
    margin: 0 0 18px;
    font-size: 17px;
    line-height: 1.8;
    color: var(--muted);
}

.story-prose p:last-child {
    margin-bottom: 0;
}

/* ---------- the challenge (mylapo, BYU) ---------- */
.story-challenge {
    padding: 0 0 88px;
    background: #fff;
}

/* the section's one-line subtitle. The h2 carries the gradient rule as its
   ::after, so this reads as copy under the rule, not a second title */
.story-challenge__sub,
.story-results__sub {
    margin: 24px 0 0;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.6;
    color: #2f5375;
}

/* the obstacles mylapo hit before switching tools, two per row so a long
   card never has to stretch down to match a taller neighbour */
.challenge-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin: 34px 0 0;
}

.challenge-card {
    padding: 26px 26px 28px;
    border: 1px solid #dceafa;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(44, 96, 150, .07);
}

.challenge-card h3 {
    margin: 0 0 12px;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: #14456f;
}

.challenge-card p {
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--muted);
}

/* prose that sits below a block rather than a paragraph needs its own air -
   the counterpart to .pullquote--spaced */
.story-prose--spaced {
    margin-top: 40px;
}

/* ---------- Part 3 · interview ---------- */
.story-interview {
    padding: 0 0 88px;
    background: #fff;
}

/* long-form column: narrower than .story-wrap for comfortable reading */
.story-flow {
    max-width: 900px;
    margin: 0 auto;
}

.qa + .qa {
    margin-top: 56px;
}

/* ---------- question ---------- */
.qa__q {
    margin: 0 0 16px;
    font-size: clamp(19px, 2.1vw, 23px);
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: -.01em;
    color: var(--ink);
    /* Override the shared tablet rule that centres every h3. */
    text-align: left;
}

/* ---------- answer ---------- */
.qa__a p {
    margin: 0 0 18px;
    font-size: 17px;
    line-height: 1.8;
    color: var(--muted);
}

.qa__a p:last-child {
    margin-bottom: 0;
}

/* a phrase Alyssa quotes back, inline */
.quote-inline {
    font-style: italic;
    color: #2f5375;
}

/* ---------- pull quote ---------- */
.pullquote {
    position: relative;
    margin: 34px 0 0;
    padding: 26px 56px;
    border: 1px solid #d9ebff;
    border-radius: 20px;
    background: linear-gradient(135deg, #eaf5ff 0%, #f8fcff 100%);
}

/* Only the opening mark is a free-floating glyph, parked in the card's left
   gutter. The closing mark belongs to the sentence, so it is set inline by
   .pullquote__text::after below and rides the last word instead. */
.pullquote::before {
    content: "\201C";
    position: absolute;
    left: 22px;
    top: 20px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 44px;
    font-weight: 700;
    line-height: 1;
    color: #b3d8f8;
}

.pullquote__text {
    margin: 0;
    font-size: clamp(17px, 1.8vw, 19px);
    font-weight: 600;
    line-height: 1.55;
    letter-spacing: -.01em;
    color: #1c3557;
}

/* The closing mark is the opening mark's twin - same face, weight, size and
   colour - but it travels with the text, so it sits right where the quote ends.
   line-height 0 keeps the 44px glyph from inflating the last line's box; the
   negative vertical-align drops it down so it hangs off the baseline instead of
   climbing into the line above. The margin-left restores the ~11px of air the
   opening mark keeps between its ink and the text, so both marks breathe alike.
   The margin-right cancels the glyph's own .519em advance (plus that margin), so
   the mark adds nothing to the line's width and can never be pushed onto a line
   of its own - it simply lives in the right gutter, mirroring the opening mark. */
.pullquote__text::after {
    content: "\201D";
    font-family: Georgia, "Times New Roman", serif;
    font-size: 44px;
    font-weight: 700;
    line-height: 0;
    color: #b3d8f8;
    vertical-align: -.38em;
    margin-left: 9px;
    margin-right: calc(-.519em - 9px);
}

/* a pull quote that follows a block, not a paragraph, needs more air than the
   34px the base rule leaves - declared after it so the margin-top takes */
.pullquote--spaced {
    margin-top: 44px;
}

/* who said it, when the quote carries its own attribution. No rule between the
   quote and the name - the whitespace alone separates them */
.pullquote__who {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 22px;
}

.pullquote__ava {
    width: 52px;
    height: 52px;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 18%;
    background: #dceaff;
    box-shadow: 0 6px 16px rgba(44, 96, 150, .16);
}

.pullquote__meta {
    line-height: 1.35;
}

.pullquote__who b {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #1c3557;
}

.pullquote__who i {
    font-style: normal;
    font-size: 14px;
    font-weight: 600;
    color: #6f8296;
}

/* ---------- comparison table ---------- */
.story-vs {
    margin: 56px 0;
    padding: 34px 40px 14px;
    border: 1px solid #e3ebf3;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(44, 96, 150, .08);
}

.story-vs__title {
    margin: 0 0 24px;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -.01em;
    text-align: center;
    color: var(--ink);
}

.story-vs__scroll {
    overflow-x: auto;
}

.story-vs__table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    table-layout: fixed;
}

.story-vs__table th,
.story-vs__table td {
    padding: 20px 18px;
    text-align: left;
    vertical-align: middle;
}

.story-vs__table th:first-child {
    padding-left: 0;
}

/* fixed layout: the header row alone sets the three column widths */
.story-vs__table thead th:first-child {
    width: 27%;
}

.story-vs__table thead th:nth-child(2) {
    width: 31%;
}

/* the header is a quiet label row; one firm rule under it carries the table */
.story-vs__table thead th {
    padding-top: 0;
    padding-bottom: 16px;
    border-bottom: 2px solid #202536;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8a96a3;
}

.story-vs__table thead .is-win {
    color: #1f7fdc;
}

.story-vs__table tbody th {
    font-size: 16px;
    font-weight: 700;
    color: #202536;
}

.story-vs__table tbody tr + tr th,
.story-vs__table tbody tr + tr td {
    border-top: 1px solid #edf1f6;
}

/* The two options are told apart by their mark and their ink, not by a filled
   column: a grey cross and muted text for the manual route, a blue tick and
   full-strength text for Cisdem. Both marks sit in the cell's left padding. */
.story-vs__table tbody td {
    padding-left: 48px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23eef1f5'/%3E%3Cpath d='M7 7l6 6M13 7l-6 6' stroke='%23a3adb9' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 18px center;
    font-size: 15px;
    line-height: 1.5;
    color: #8a96a3;
}

.story-vs__table tbody td.is-win {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%233495f2'/%3E%3Cpath d='M5.8 10.3l2.8 2.8 5.6-6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    font-weight: 700;
    color: #202536;
}

/* ---------- Part 4 · 3-step routine ---------- */
.story-routine {
    padding: 0 0 88px;
    background: #fff;
}

.routine-lead {
    margin: 0;
    font-size: 17px;
    line-height: 1.8;
    color: var(--muted);
}

.story-routine__head {
    margin: 48px auto 44px;
    text-align: center;
}

/* a sub-heading inside the interview, not a section title: it sits a notch
   under the 35px section heads and a notch over the 24px step titles it names */
.story-routine__head h2 {
    margin: 0;
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.012em;
    color: var(--ink);
}

.story-routine__head h2::after {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    margin: 14px auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #3495f2, #63b8ff);
}

@media (max-width: 1024px) {
    .story-routine__head h2::after {
        margin-left: 0;
        margin-right: auto;
    }
}

/* ---------- one step ---------- */
.step {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
}

.step + .step {
    margin-top: 72px;
}

.step--flip .step__media {
    order: -1;
}

.step__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

/* a marker beside the title, not a headline of its own: sized to the title's
   line so the two read as one unit */
.step__num {
    display: grid;
    place-items: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: linear-gradient(135deg, #3495f2, #63b8ff);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    box-shadow: 0 5px 12px rgba(52, 149, 242, .24);
}

/* same type as the interview's questions (.qa__q) and answers (.qa__a p), so
   the steps read as part of the same page rather than a separate module */
.step__title {
    margin: 0;
    font-size: clamp(19px, 2.1vw, 23px);
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: -.01em;
    color: var(--ink);
}

.step__body p {
    margin: 0 0 18px;
    font-size: 17px;
    line-height: 1.8;
    color: var(--muted);
}

.step__body p:last-child {
    margin-bottom: 0;
}

.step__media {
    margin: 0;
    padding: 10px;
    border: 1px solid #dceafa;
    border-radius: 20px;
    background: #f7fbff;
    box-shadow: 0 16px 38px rgba(44, 96, 150, .1);
}

.step__media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}

/* follows the last step directly, so it takes a section-sized gap */
.routine-outro {
    margin-top: 60px;
}

.routine-outro p {
    margin: 0 0 16px;
    font-size: 17px;
    line-height: 1.8;
    color: var(--muted);
}

.routine-outro p:last-child {
    margin-bottom: 0;
}

/* ---------- the solution (mylapo) ---------- */
.story-solution {
    padding: 0 0 88px;
    background: #fff;
}

/* the two sub-blocks inside the solution. Left-aligned, unlike the centred
   section heads, because they sit within the reading column */
.solution-subhead {
    margin: 60px 0 0;
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.015em;
    color: var(--ink);
    /* Override the shared tablet rule that centres every h3. */
    text-align: left;
}

/* the sentence that opens a sub-block, a step up from the body copy */
.solution-lead {
    margin: 14px 0 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.7;
    color: #2f5375;
}

/* copy that follows a sub-head needs only a line's worth of air */
.solution-subhead + .story-prose,
.solution-lead + .story-prose {
    margin-top: 16px;
}

/* both numbered lists - the capabilities and the workflow - are the routine's
   .step with its media column taken away */
.solution-steps {
    margin-top: 36px;
}

.step--text {
    grid-template-columns: minmax(0, 1fr);
}

.step--text + .step--text {
    margin-top: 52px;
}

/* A testimonial that belongs to one numbered step rather than standing between
   blocks. Same component and same size as every other pull quote - it only
   sits a little closer to the step copy above it. */
.step__body .pullquote {
    margin: 26px 0 0;
}

/* the paragraph that closes a step once its quote has been read */
.step__body .pullquote + p {
    margin-top: 26px;
}

/* ---------- the results (mylapo) ---------- */
.story-results {
    padding: 0 0 88px;
    background: #fff;
}

/* the four outcomes, one per line. A ticked panel rather than plain bullets so
   the section reads as the payoff the challenge set up */
.result-list {
    margin: 32px 0 0;
    padding: 30px 34px;
    list-style: none;
    border: 1px solid #dceafa;
    border-radius: 24px;
    background: linear-gradient(165deg, #eaf5ff 0%, #f8fcff 100%);
    box-shadow: 0 16px 40px rgba(44, 96, 150, .09);
}

/* the tick rides in the flow as a flex item, so it centres on the item's text
   whether that runs to one line or three. An absolute offset would have to know
   about the 16px padding the dividers add above every item after the first */
.result-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 17px;
    line-height: 1.7;
    color: var(--muted);
}

.result-list li + li {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed #cfe3f7;
}

/* the badge keeps its fixed box - centred by the grid so the glyph's metrics
   don't matter - and only its placement changed */
.result-list li::before {
    content: "\2713";
    flex: none;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3495f2, #63b8ff);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 4px 10px rgba(52, 149, 242, .3);
}

/* ---------- Part 5 · outcome ---------- */
.story-outcome {
    padding: 0 0 88px;
    background: #fff;
}

/* The closing question follows the outcome's pull quote, so it opens with the
   same 56px the interview uses between two questions. */
.story-closing {
    margin-top: 56px;
}

/* ---------- what's next (BYU) ---------- */
/* the closing takeaway: one paragraph of advice, then the voice that recommends
   the tool. It sits between the results and the related cases, so it carries the
   same section shell as the numbered blocks above it */
.story-next {
    padding: 0 0 88px;
    background: #fff;
}

/* ---------- Part 6 · related case studies ---------- */
.story-related {
    padding: 0 0 88px;
    background: #fff;
}

.story-related__head > p {
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--muted);
}

/* The cards reuse the .case shell from use-cases.css, so a related card reads as
   the same story card as on the customer-stories index. Unlike those, these
   three carry only a title, a line of copy and the link - no tag, no quote and
   no avatar row - so only the shell and the link are borrowed. */
.related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

/* white behind the picture, for the feature images that carry transparency */
.story-related .case-media {
    background: #fff;
}

.story-related .case-body {
    gap: 12px;
}

.story-related .case-body p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #4a5560;
}

/* .case-more is built to sit at the end of the card footer's flex row; here it
   closes the column */
.story-related .case-more {
    margin: auto 0 0;
}

/* the card body is as tall as its copy, so the three links line up only when
   every card's copy ends at the same height - let the grid do that */
.story-related .case {
    height: 100%;
    position: relative;
    cursor: pointer;
}

/* Stretch the Read Story link over the whole card so any point on the card is
   clickable, while the visible link text stays in place for keyboard and
   screen-reader users. */
.story-related .case-more::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* keep the stretched card link's focus ring visible around the card */
.story-related .case:focus-within {
    outline: 2px solid #2b8af0;
    outline-offset: 3px;
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
    .story-hero,
    .story-stats {
        padding: 56px 0 64px;
    }

    /* the result strip stays one band, just tighter */
    .story-hero__stats,
    .story-stats__strip {
        padding: 28px 26px 26px;
    }

    .hero-stat {
        padding: 0 22px;
    }

    .hero-stat__label {
        font-size: 14px;
    }

    /* steps stack, and the image always follows its text */
    .step {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .step--flip .step__media {
        order: 0;
    }

    .step + .step {
        margin-top: 48px;
    }

    /* three cards side by side stop fitting well before this point */
    .related-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 760px) {
    .story-routine {
        padding-bottom: 64px;
    }

    .story-routine__head {
        margin: 44px auto 40px;
    }

    .step__num {
        width: 32px;
        height: 32px;
        border-radius: 10px;
        font-size: 15px;
    }

    .step__media {
        padding: 7px;
        border-radius: 16px;
    }

    .story-glance {
        padding-bottom: 64px;
    }

    .glance-grid {
        grid-template-columns: minmax(0, 1fr);
        column-gap: 0;
        padding: 28px 22px;
    }

    /* stacked: every row but the first needs its own divider back */
    .glance-item:nth-child(2) {
        padding-top: 24px;
        border-top: 1px dashed #e3ebf3;
    }

    .glance-item--wide {
        grid-column: auto;
    }

    .glance-item dd {
        font-size: 17px;
    }

    .story-meet,
    .story-challenge,
    .story-solution,
    .story-results,
    .story-interview {
        padding-bottom: 64px;
    }

    .story-meet__logo {
        width: 60px;
        height: 60px;
        margin-bottom: 14px;
    }

    /* two cards side by side stop fitting well before this point */
    .challenge-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .story-related {
        padding-bottom: 64px;
    }

    .qa + .qa {
        margin-top: 40px;
    }

    .qa__q {
        margin-bottom: 12px;
        font-size: 18px;
    }

    .qa__a p,
    .step__body p {
        font-size: 16px;
        line-height: 1.75;
    }

    .pullquote {
        margin-top: 26px;
        padding: 22px 42px;
    }

    .pullquote::before {
        left: 14px;
        top: 18px;
        font-size: 36px;
    }

    .pullquote__text::after {
        font-size: 36px;
        margin-left: 8px;
        margin-right: calc(-.519em - 8px);
    }

    .pullquote__ava {
        width: 44px;
        height: 44px;
    }

    .pullquote__who {
        margin-top: 18px;
    }

    .story-vs {
        margin: 40px 0;
        padding: 24px 18px 16px;
    }

    .story-vs__title {
        margin-bottom: 20px;
        font-size: 19px;
    }

    .story-vs__table th,
    .story-vs__table td {
        padding: 15px 12px;
    }

    .story-vs__table tbody th {
        font-size: 15px;
    }
}

/* below this the 3-column table stops being readable, so each
   metric becomes its own stacked block with the two options labelled */
@media (max-width: 760px) {
    .story-vs__table,
    .story-vs__table tbody,
    .story-vs__table tr,
    .story-vs__table th,
    .story-vs__table td {
        display: block;
        width: auto;
    }

    .story-vs__table {
        min-width: 0;
    }

    .story-vs__table thead {
        display: none;
    }

    .story-vs__table tbody tr {
        padding: 18px 0;
        border-top: 1px solid #edf1f6;
    }

    .story-vs__table tbody tr:first-child {
        padding-top: 0;
        border-top: 0;
    }

    .story-vs__table tbody tr + tr th,
    .story-vs__table tbody tr + tr td {
        border-top: 0;
    }

    .story-vs__table tbody th {
        padding: 0 0 12px;
    }

    .story-vs__table tbody td {
        padding: 11px 14px;
        border-radius: 12px;
        background: #f7f9fc;
        font-size: 14px;
    }

    .story-vs__table tbody td + td {
        margin-top: 8px;
    }

    .story-vs__table tbody td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 5px;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: #9aa6b4;
    }

    .story-vs__table td.is-win::before {
        color: #1f7fdc;
    }

    /* stacked, the Cisdem answer is the outlined box - no fill, no tick */
    .story-vs__table tbody td.is-win {
        padding: 10px 13px;
        border: 1px solid #cfe0f2;
        background: #fff;
    }

    .story-outcome {
        padding-bottom: 64px;
    }
}

@media (max-width: 680px) {
    .story-wrap {
        width: min(1200px, calc(100% - 28px));
    }

    /* the figures stack so their labels get the full width */
    .story-hero__stats,
    .story-stats__strip {
        grid-template-columns: 1fr;
        margin-top: 20px;
        padding: 20px 22px;
    }

    .story-stats__strip {
        margin-top: 0;
    }

    .hero-stat {
        padding: 18px 0 0;
        text-align: left;
        border-left: 0;
        border-top: 1px dashed #cfe3f7;
    }

    .hero-stat:first-child {
        padding-top: 0;
        border-top: 0;
    }
}

/* iPad mini (768-1024px): centre the section heads, the short gradient rule
   under them and the line of copy they carry. This block must stay last in the
   file - the max-width:1024px rule earlier left-aligns the same selectors with
   the same specificity, so only source order lets this one win.
   Phones (<=767px) and desktop (>1024px) are untouched. */
@media (min-width: 768px) and (max-width: 1024px) {
    .story-meet__head,
    .story-challenge__head,
    .story-solution__head,
    .story-results__head,
    .story-next__head,
    .story-glance__head,
    .story-interview__head,
    .story-outcome__head,
    .story-related__head,
    .story-routine__head {
        text-align: center;
    }

    .story-meet__head h2,
    .story-challenge__head h2,
    .story-solution__head h2,
    .story-results__head h2,
    .story-next__head h2,
    .story-glance__head h2,
    .story-interview__head h2,
    .story-outcome__head h2,
    .story-related__head h2,
    .story-routine__head h2 {
        text-align: center;
    }

    .story-meet__head h2::after,
    .story-challenge__head h2::after,
    .story-solution__head h2::after,
    .story-results__head h2::after,
    .story-next__head h2::after,
    .story-glance__head h2::after,
    .story-interview__head h2::after,
    .story-outcome__head h2::after,
    .story-routine__head h2::after {
        margin-left: auto;
        margin-right: auto;
    }

    /* the customer's mark sits directly above the "Meet ..." title */
    .story-meet__logo {
        margin-left: auto;
        margin-right: auto;
    }

    /* copy carried by a head follows the centred title */
    .story-challenge__sub,
    .story-results__sub,
    .story-related__head > p {
        text-align: center;
    }
}

/* Phones only (<=743px): the first screen reads left-aligned - product row,
   headline, lead, buttons and the line under them, the "Available for" row and
   the review row all start at the left edge.
   The max-width:767px block above still centres the banner for iPad mini, whose
   portrait width is 744px, so this block stops one pixel short of it. Desktop
   and tablet (>=768px) are untouched. */
@media (max-width: 743px) {
    .header-banner .app-product {
        justify-content: flex-start;
    }

    .header-banner h1,
    .header-banner .lead,
    .header-banner .buttons,
    .header-banner .subtitle {
        text-align: left;
    }

    /* the lead's 580px box starts at the left edge instead of being centred
       inside the column */
    .header-banner .lead {
        margin-left: 0;
        margin-right: auto;
    }

    .header-banner .platform-icons {
        align-items: flex-start;
    }

    .header-banner .platform-left,
    .header-banner .review-star {
        justify-content: flex-start;
        text-align: left;
    }
}