/* Friendly IT apps pages (/apps and each product page). Loaded after site.css on those pages only.
   Uses the site.css brand tokens only: products don't get their own palettes. */
:root { --on-navy: #C3CCDD; }

.apps-page .btn-row { align-items: center; }
.apps-page .page-head { padding: 40px 0 44px; }
.apps-page .page-head h1 { font-size: clamp(2rem, 3.6vw, 3rem); max-width: 20em; }
.apps-page .page-head .lead-text { margin: 16px 0 0; }
.apps-page .page-head + .section { padding-top: 40px; }
.apps-page .closing h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); }
/* White on brand orange needs large text (19px bold) to meet contrast AA. */
.apps-page .btn-orange { font-size: 1.1875rem; }

/* ===== Shared components ===== */
.app-icon { width: 64px; height: 64px; border-radius: 16px; overflow: hidden; flex: none; box-shadow: 0 6px 16px rgba(20, 33, 61, 0.18); }
.app-icon img { width: 100%; height: 100%; display: block; }
.app-icon.lg { width: 84px; height: 84px; border-radius: 22px; }
.app-head-row { display: flex; align-items: center; gap: 16px; }
.app-head-row .name { font-weight: 800; font-size: 1.3rem; line-height: 1.2; }
.app-head-row .name.lg { font-size: 1.6rem; }
.app-head-row .by { font-size: 0.92rem; color: var(--navy-soft); }

/* Official Google Play badge. The PNG includes Google's clear space, so negative margins line it up with buttons. */
.play-badge { display: inline-block; line-height: 0; border-radius: 10px; }
.play-badge img { height: 74px; width: auto; margin: -12px -14px; }
.play-legal { font-size: 0.8rem; color: var(--navy-soft); text-align: center; margin: 0; padding: 18px 0; background: var(--white); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 600; padding: 5px 12px; border-radius: 6px; background: var(--white); color: var(--navy); }
.chip svg { width: 15px; height: 15px; }

.phone { position: relative; width: 100%; max-width: 270px; aspect-ratio: 9 / 20; border-radius: 34px; background: var(--navy); padding: 9px; box-shadow: 0 24px 48px rgba(20, 33, 61, 0.22), 0 0 0 1px var(--navy-line); }
.phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 26px; display: block; background: var(--white); }
.phone.r12 { aspect-ratio: 1 / 2; }
.phone.r916 { aspect-ratio: 9 / 16; }

.see-link { font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--orange); padding-bottom: 2px; }
.h-section.tight { margin-bottom: 12px; }
.lead-narrow { max-width: 36em; }

/* ===== Apps hub ===== */
.app-stack { display: grid; gap: 28px; }
.app-card { display: grid; grid-template-columns: 1.15fr 1fr; background: var(--sky); border-radius: var(--radius); overflow: hidden; }
.app-card .copy { padding: 48px; }
.app-card h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); margin: 22px 0 18px; }
.app-card .btn-row { margin-top: 28px; }
.app-card .shots { background: var(--navy); }
.app-card.flip .shots { order: -1; }
.app-card .shots .phone { max-width: 270px; }

/* Overlapping pair of phones, cut off by the bottom of their panel. */
.shots { position: relative; display: flex; justify-content: center; align-items: flex-end; padding: 48px 24px 0; min-height: 500px; overflow: hidden; }
.shots .phone { max-width: 230px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding-bottom: 0; }
.shots .phone img { border-bottom-left-radius: 0; border-bottom-right-radius: 0; object-position: top; }
.shots .phone.back { transform: translate(40px, -30px) rotate(5deg); }
.shots .phone.front { transform: translateX(-30px); z-index: 2; }

.apps-privacy-note { font-size: 0.93rem; color: var(--navy-soft); text-align: center; margin: 36px 0 0; }

/* ===== Product page hero ===== */
.app-hero { background: var(--navy); color: var(--on-navy); overflow: hidden; }
.app-hero .grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: end; padding-top: 56px; }
.app-hero .intro { padding-bottom: 56px; }
.app-hero .crumbs, .app-hero .crumbs a { color: var(--on-navy); }
.app-hero .name { color: var(--white); }
.app-hero .by { color: var(--on-navy); }
.app-hero h1 { color: var(--white); font-size: clamp(2.3rem, 4.6vw, 3.7rem); margin: 22px 0 20px; }
.app-hero .lead-text { color: var(--on-navy); max-width: 32em; }
.app-hero .chips { margin: 24px 0 30px; }
.app-hero .chip { background: var(--navy-line); color: var(--white); }
.app-hero .see-link { color: var(--white); }
.app-hero .see-link:hover { color: var(--orange); }
.app-hero .android-note { font-size: 0.9rem; margin: 16px 0 0; }
.app-hero .shots { padding-top: 0; min-height: 540px; }
.app-hero .shots .phone { max-width: 260px; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--navy-line); }

/* ===== Benefits ===== */
.feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; padding: 64px 0; border-top: 1px solid var(--rule); }
.feature-row:first-of-type { border-top: 0; padding-top: 0; }
.feature-row.flip .media { order: -1; }
.feature-row h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); margin-bottom: 16px; }
.feature-row .media { display: flex; justify-content: center; background: var(--sky); border-radius: var(--radius); padding: 40px 24px; }
.ticks { list-style: none; padding: 0; margin: 22px 0 0; }
.ticks li { padding: 9px 0 9px 32px; position: relative; border-top: 1px solid var(--rule); }
.ticks li::before { content: ""; position: absolute; left: 4px; top: 16px; width: 14px; height: 8px; border-left: 2px solid var(--orange); border-bottom: 2px solid var(--orange); transform: rotate(-45deg); }
.callout { margin-top: 22px; background: var(--sky); border-left: 3px solid var(--orange); padding: 14px 18px; border-radius: 0 6px 6px 0; font-size: 0.97rem; }

/* Benefits with no current screenshot */
.benefit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.benefit { background: var(--white); border-radius: var(--radius); padding: 32px; }
.benefit:last-child:nth-child(odd) { grid-column: 1 / -1; }
.benefit h3 { font-size: 1.4rem; margin-bottom: 12px; }
.benefit p { color: var(--navy-soft); margin-bottom: 0; }
.benefit .ticks { margin-top: 16px; font-size: 0.97rem; }
.benefit .note { margin-top: 14px; font-size: 0.95rem; }

/* ===== Margin Calculator worked example and modes ===== */
.worked { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; }
.worked h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); margin-bottom: 16px; }
.worked p { margin: 0; }
.diff-table { background: var(--sky); border-radius: var(--radius); padding: 8px 24px; }
.diff-table div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--rule); font-variant-numeric: tabular-nums; }
.diff-table div:first-child { border-top: 0; }
.diff-table span { color: var(--navy-soft); }
.diff-table strong { font-size: 1.1rem; }
.diff-table .hl strong { color: var(--orange-deep); }

.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mode { background: var(--white); border-radius: var(--radius); padding: 30px; border-top: 4px solid var(--orange); }
.mode h3 { font-size: 1.3rem; margin-bottom: 8px; }
.mode p { color: var(--navy-soft); margin: 0; font-size: 0.97rem; }
.mode .eg { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.mode .eg .loss { color: var(--orange-deep); }

/* ===== Who it's for ===== */
.uses { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.use { background: var(--white); border-radius: var(--radius); padding: 28px; }
.use .ico { width: 44px; height: 44px; border-radius: 10px; background: var(--sky); display: grid; place-items: center; margin-bottom: 16px; color: var(--orange-deep); }
.use .ico svg { width: 24px; height: 24px; }
.use h3 { font-size: 1.15rem; margin-bottom: 8px; }
.use p { color: var(--navy-soft); font-size: 0.97rem; margin: 0; }
.use-bordered { box-shadow: inset 0 0 0 1px var(--rule); }
.section-note { color: var(--navy-soft); margin: 28px 0 0; max-width: 44em; }

/* ===== Pricing and ads ===== */
.fair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.fair-card { border-radius: var(--radius); padding: 40px; }
.fair-card:only-child { grid-column: 1 / -1; }
.fair-card h3 { font-size: 1.35rem; margin-bottom: 12px; }
.fair-card ul { padding-left: 1.1rem; margin: 16px 0 0; }
.fair-card li { padding: 3px 0; }
.fair-card p:last-child { margin-bottom: 0; }
.fair-card.navy { background: var(--navy); color: var(--on-navy); }
.fair-card.navy h3 { color: var(--white); }
.fair-card.sky { background: var(--sky); }
.fair-card.white { background: var(--white); }

/* ===== Closing call to action ===== */
.app-closing { background: var(--navy); }
.app-closing h2 { color: var(--white); }
.app-closing p { color: var(--on-navy); }
.app-closing p a { color: var(--white); }
.small-links { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 28px; padding: 0; margin: 28px 0 0; font-size: 0.93rem; color: var(--on-navy); }
.small-links a { color: var(--white); }
.small-links a:hover { color: var(--orange); }

/* ===== Responsive ===== */
@media (max-width: 991.98px) {
    .app-card, .app-hero .grid, .feature-row, .worked, .fair, .benefit-grid { grid-template-columns: 1fr; gap: 32px; }
    .app-card { gap: 0; }
    .app-card.flip .shots { order: 0; }
    .app-card .copy { padding: 36px; }
    .app-hero .intro { padding-bottom: 0; }
    .app-hero .shots { min-height: 460px; }
    .modes { grid-template-columns: 1fr; }
    .feature-row.flip .media { order: 0; }
    .uses { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 575.98px) {
    .apps-page .wrap { padding: 0 16px; }
    .apps-page .app-hero .wrap.grid { padding-top: 20px; }
    /* Keep the install action on the first screen: it moves up, above the longer text. */
    .app-hero .intro { display: flex; flex-direction: column; }
    .app-hero h1 { font-size: 2rem; margin: 14px 0 18px; }
    .app-hero .crumbs { margin-bottom: 4px; }
    .app-hero .app-icon.lg { width: 64px; height: 64px; border-radius: 16px; }
    .app-head-row .name.lg { font-size: 1.3rem; }
    .app-hero .btn-row { order: 1; }
    .app-hero .android-note { order: 2; margin-bottom: 20px; }
    .app-hero .lead-text { order: 3; margin-top: 0; }
    .app-hero .chips { order: 4; margin: 20px 0 0; }
    .app-card .copy, .fair-card, .benefit { padding: 26px 22px; }
    .shots { min-height: 400px; }
    .app-hero .shots { min-height: 400px; }
    .shots .phone, .app-hero .shots .phone { max-width: 190px; }
    .uses { grid-template-columns: 1fr; }
    .feature-row { gap: 24px; }
}