:root {
                --bg: #f1faf8;
                --ink: #122f30;
                --muted: #526c6c;
                --accent: #7eced8;
                --teal: #167b80;
                --line: #c9e3df;
                --white: #fff;
                --soft: #def4f1;
                --shadow: 0 16px 55px rgba(19, 65, 66, 0.09);
            }
            * {
                box-sizing: border-box;
            }
            html {
                scroll-behavior: smooth;
            }
            body {
                margin: 0;
                background: var(--bg);
                color: var(--ink);
                font-family:
                    ui-sans-serif,
                    system-ui,
                    -apple-system,
                    BlinkMacSystemFont,
                    "Segoe UI",
                    sans-serif;
                line-height: 1.55;
                -webkit-font-smoothing: antialiased;
            }
            a {
                color: inherit;
            }
            a:focus-visible {
                outline: 3px solid var(--teal);
                outline-offset: 4px;
                border-radius: 3px;
            }
            .wrap {
                width: min(1120px, calc(100% - 48px));
                margin-inline: auto;
            }
            .site-header {
                border-bottom: 1px solid var(--line);
                background: rgba(241, 250, 248, 0.9);
            }
            .header-inner {
                min-height: 82px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 18px;
            }
            .brand {
                text-decoration: none;
                font-size: 1.15rem;
                letter-spacing: -0.035em;
                font-weight: 800;
                white-space: nowrap;
                display: flex;
                align-items: center;
                gap: 12px;
            }
            .brand-mark {
                width: 39px;
                height: 39px;
                border: 2px solid #173f40;
                border-radius: 12px;
                background: var(--accent);
                display: grid;
                place-items: center;
                font-weight: 900;
                font-size: 1.2rem;
            }
            .nav {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                gap: 26px;
                font-size: 0.94rem;
                font-weight: 650;
            }
            .nav a {
                text-decoration: none;
                color: #3a6061;
            }
            .nav a:hover {
                color: #096d75;
            }
            .eyebrow {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                text-transform: uppercase;
                letter-spacing: 0.13em;
                font-size: 0.72rem;
                font-weight: 800;
                color: #1d7679;
            }
            .eyebrow::before {
                content: "";
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: #37ad9d;
            }
            .hero {
                padding: 98px 0 105px;
            }
            .hero-layout {
                display: grid;
                grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
                gap: 72px;
                align-items: center;
            }
            .hero h1 {
                font-size: clamp(3.5rem, 6.5vw, 6rem);
                line-height: 1.02;
                letter-spacing: -0.075em;
                font-weight: 850;
                max-width: 760px;
                margin: 21px 0 26px;
            }
            .hero h1 em {
                font-style: normal;
                color: var(--teal);
            }
            .lead {
                font-size: 1.2rem;
                color: var(--muted);
                max-width: 590px;
                line-height: 1.73;
                margin: 0 0 28px;
            }
            .actions {
                display: flex;
                flex-wrap: wrap;
                gap: 12px;
                align-items: center;
            }
            .button {
                padding: 14px 21px;
                border-radius: 12px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                text-decoration: none;
                font-weight: 760;
                font-size: 0.94rem;
                transition: transform 0.15s ease;
            }
            .button:hover {
                transform: translateY(-2px);
            }
            .primary {
                background: #143b3d;
                color: white;
            }
            .secondary {
                border: 1.5px solid #a7cac7;
                color: #184345;
            }
            .availability {
                display: flex;
                align-items: center;
                gap: 9px;
                color: #567473;
                font-size: 0.85rem;
                margin-top: 20px;
            }
            .availability::before {
                content: "";
                width: 7px;
                height: 7px;
                border-radius: 50%;
                background: #43a98e;
            }

            .word-card {
                position: relative;
                z-index: 1;
                background: white;
                border: 2px solid #163a3c;
                border-radius: 23px;
                box-shadow: 9px 10px 0 #173c3d;
                width: min(305px, 80%);
                padding: 30px;
                transform: rotate(-5deg);
            }
            .word-label {
                text-transform: uppercase;
                letter-spacing: 0.13em;
                font-size: 0.69rem;
                color: #66827f;
                font-weight: 800;
            }
            .word-title {
                font-family: Georgia, serif;
                font-weight: 700;
                font-size: 2.4rem;
                line-height: 1.1;
                margin: 15px 0 5px;
            }
            .pronunciation {
                font-size: 0.85rem;
                color: #55807e;
            }
            .word-definition {
                font-size: 0.94rem;
                line-height: 1.65;
                color: #3e6160;
                margin-top: 22px;
            }
            .mini-stars {
                display: flex;
                gap: 6px;
                margin-top: 22px;
            }
            .mini-stars span {
                width: 28px;
                height: 7px;
                border-radius: 6px;
                background: #86d3c5;
            }
            .mini-stars span:nth-child(4),
            .mini-stars span:nth-child(5) {
                background: #deefec;
            }
            .little-tag {
                position: absolute;
                right: 18px;
                top: 22px;
                background: #173b3d;
                color: #fff;
                border-radius: 8px;
                font-size: 0.69rem;
                padding: 7px 10px;
                letter-spacing: 0.03em;
            }
            .section {
                padding: 72px 0 90px;
            }
            .section.alt {
                background: #fff;
                border-top: 1px solid #e3eeed;
                border-bottom: 1px solid #e3eeed;
            }
            .section-head {
                max-width: 690px;
                margin-bottom: 35px;
            }
            .section h2 {
                font-size: clamp(2.1rem, 4.3vw, 3.35rem);
                letter-spacing: -0.06em;
                line-height: 1.13;
                margin: 12px 0 18px;
            }
            .section-sub {
                color: var(--muted);
                font-size: 1.05rem;
                margin: 0;
            }
            .features {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 16px;
            }
            .feature {
                background: #f6fbfa;
                border: 1px solid #d8eae7;
                border-radius: 19px;
                padding: 27px 25px;
            }
            .feature-icon {
                width: 44px;
                height: 44px;
                border-radius: 12px;
                background: #d6f0e9;
                display: grid;
                place-items: center;
                font-size: 1.25rem;
                color: #195c5d;
            }
            .feature h3 {
                font-size: 1.2rem;
                letter-spacing: -0.025em;
                margin: 21px 0 9px;
            }
            .feature p {
                color: var(--muted);
                font-size: 0.96rem;
                margin: 0;
                line-height: 1.7;
            }
            .values {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 22px;
                margin-top: 30px;
            }
            .value {
                padding-top: 22px;
                border-top: 2px solid #a8d9d3;
            }
            .value strong {
                display: block;
                font-size: 1.2rem;
                margin-bottom: 6px;
            }
            .value p {
                color: var(--muted);
                margin: 0;
            }
            .closing {
                padding: 90px 0;
            }
            .closing-inner {
                border-radius: 30px;
                background: #163d3f;
                color: #fff;
                padding: 62px 70px;
                display: flex;
                justify-content: space-between;
                gap: 40px;
                align-items: center;
            }
            .closing-inner h2 {
                font-size: clamp(2rem, 4vw, 3.2rem);
                line-height: 1.1;
                letter-spacing: -0.055em;
                margin: 0 0 12px;
            }
            .closing-inner p {
                color: #c8e6e3;
                margin: 0;
                max-width: 560px;
            }
            .closing-inner .button {
                background: #a5e6df;
                color: #113536;
                white-space: nowrap;
            }
            .footer {
                border-top: 1px solid var(--line);
                padding: 28px 0 40px;
            }
            .footer-inner {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 20px;
                flex-wrap: wrap;
                color: #5b7775;
                font-size: 0.85rem;
            }
            .footer nav {
                display: flex;
                gap: 22px;
                flex-wrap: wrap;
            }
            .footer a {
                text-decoration: none;
            }
            .footer a:hover {
                text-decoration: underline;
            }
            .skip {
                position: absolute;
                left: -9999px;
                top: auto;
            }
            .skip:focus {
                left: 14px;
                top: 14px;
                background: white;
                padding: 10px;
                z-index: 999;
            }
            @media (max-width: 850px) {
                .hero-layout {
                    grid-template-columns: 1fr;
                    gap: 42px;
                }
                .hero {
                    padding: 65px 0 70px;
                }
                .art {
                    min-height: 340px;
                }
                .features {
                    grid-template-columns: repeat(2, 1fr);
                }
                .closing-inner {
                    padding: 44px;
                    flex-direction: column;
                    align-items: start;
                }
                .values {
                    grid-template-columns: 1fr;
                    gap: 18px;
                }
                .value {
                    padding-top: 16px;
                }
            }
            @media (max-width: 560px) {
                .wrap {
                    width: min(100% - 32px, 1120px);
                }
                .header-inner {
                    min-height: 72px;
                    align-items: flex-start;
                    flex-direction: column;
                    justify-content: center;
                    padding: 15px 0;
                    gap: 12px;
                }
                .nav {
                    gap: 18px;
                    font-size: 0.83rem;
                }
                .hero h1 {
                    font-size: clamp(3rem, 12vw, 4.1rem);
                }
                .lead {
                    font-size: 1.04rem;
                }
                .hero {
                    padding: 55px 0 64px;
                }
                .art {
                    min-height: 330px;
                }
                .word-card {
                    transform: rotate(-3deg);
                }
                .section {
                    padding: 55px 0 65px;
                }
                .features {
                    grid-template-columns: 1fr;
                }
                .closing {
                    padding: 55px 0;
                }
                .closing-inner {
                    padding: 34px 25px;
                }
                .footer-inner {
                    align-items: flex-start;
                    flex-direction: column;
                }
            }
            @media (prefers-reduced-motion: reduce) {
                html {
                    scroll-behavior: auto;
                }
                .button {
                    transition: none;
                }
                .button:hover {
                    transform: none;
                }
            }



.iphone {
    position: relative;
    width: 260px;
    aspect-ratio: 1350 / 2760;
}

.iphone-screen {
    position: absolute;
    left: 5.3%;
    top: 2.5%;
    width: 89.5%;
    height: 95%;
    border-radius: 11% / 5%;
    overflow: hidden;
}

.iphone-screen img {
    display: block;
    width: 100%;
    height: 100%;
}

.iphone-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
/* iPhone showcase */

.phones-showcase {
    position: relative;
    width: 100%;
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
}

.iphone {
    position: absolute;
    width: 280px; /* Previously 240px */
    aspect-ratio: 1350 / 2760;
    transform-origin: center bottom;
}

.iphone-screen {
    position: absolute;
    left: 5.3%;
    top: 2.5%;
    width: 89.5%;
    height: 95%;
    border-radius: 11% / 5%;
    overflow: hidden;
    background: #fff;
}

.iphone-screen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.iphone-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
}

.iphone-left {
    z-index: 1;
    transform: translateX(-110px) rotate(-13deg) scale(0.82);
}

.iphone-right {
    z-index: 2;
    transform: translateX(110px) rotate(13deg) scale(0.82);
}

.iphone-centre {
    z-index: 3;
    transform: translateY(-10px);
    filter: drop-shadow(0 16px 20px rgba(20, 50, 50, 0.18));
}

/* Smaller screens */

@media (max-width: 700px) {
    .phones-showcase {
        min-height: 390px;
        margin-top: 20px;
    }

    .iphone {
        width: 175px;
    }

    .iphone-left {
        transform: translateX(-75px) rotate(-13deg) scale(0.82);
    }

    .iphone-right {
        transform: translateX(75px) rotate(13deg) scale(0.82);
    }

    .iphone-centre {
        transform: translateY(-5px);
    }
}