/* ===========================================================================
   Mind the App®: landing page

   NOTE ON FONTS: no webfont is imported. The previous version pulled Roboto
   from fonts.googleapis.com, which discloses every visitor's IP address to a
   third party on page load, inappropriate for a health application and
   inconsistent with the privacy policy this site publishes. The stack below
   resolves to Roboto locally when installed and to the platform UI face
   otherwise. Same reasoning as assets/privacy.css.
   ========================================================================= */

:root {
    /* Sampled from mind-the-app.pdf (slides 02 and 15) */
    --blue-700: #0b4a88;
    --blue-600: #0d5596;
    --blue-500: #1a6fb0;
    --teal-500: #05b2bd;
    --teal-400: #0f91b7;
    /* The logo's exact teal (logo-mind-the-app.svg, fill #00dbdb). Used for the
       headline's closing phrase and the primary button so the page, the mark
       and the app screen in the photo all carry the same teal. Measured against
       the sampled background: 3.58:1 on the headline (large text, 3:1 minimum)
       and 5.17:1 on the button label (4.5:1 minimum). The previous #63c9bd and
       #1dd3c4 gave 3.13:1 and 4.75:1. */
    --teal-text: #00dbdb;
    --mint-400: #00dbdb;

    --font-sans: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    /* Both forms are needed: the unprefixed property covers Chromium browsers,
       while Safari still only honours the -webkit- prefix. Stops iOS inflating
       text in landscape, which would break the one-screen layout. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.6;
    color: #fff;
    -webkit-font-smoothing: antialiased;

    /* The deck's signature surface: a blue field with teal glows bleeding in
       from the top-right and bottom-left. Replaces a 532 KB stethoscope photo
       with ~0 bytes, and matches the brand rather than generic medical stock. */
    background-color: var(--blue-600);
    /* Bookends the field with the exact colour of the theme-color meta so
       that Safari's status bar and bottom toolbar, which it tints with that
       value, blend into the page. Without it the flat chrome meets the
       gradient's teal-leaning top edge and navy bottom edge, and both read
       as a blue bar. Sits above the glows so it fades them too. */
    background-image:
        linear-gradient(to bottom,
            var(--blue-600) 0,
            rgba(13, 85, 150, 0) 4.5rem,
            rgba(13, 85, 150, 0) calc(100% - 5rem),
            var(--blue-600) 100%),
        radial-gradient(ellipse 70% 58% at 100% 0%, rgba(5, 178, 189, .78) 0%, rgba(5, 178, 189, 0) 60%),
        radial-gradient(ellipse 72% 62% at 0% 100%, rgba(15, 145, 183, .88) 0%, rgba(15, 145, 183, 0) 58%),
        linear-gradient(155deg, var(--blue-500) 0%, var(--blue-600) 55%, var(--blue-700) 100%);
    background-attachment: fixed;

    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: clamp(1.25rem, 3vw, 2.5rem);
}

.page {
    flex: 1;
    width: 100%;
    max-width: 60rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 4vh, 2.75rem);
}

:focus-visible {
    outline: 2px solid var(--mint-400);
    outline-offset: 4px;
    border-radius: 3px;
}

/* ------------------------------------------------------------------- brand */

.brand {
    text-align: center;
}

.brand__logo {
    width: clamp(160px, 21vw, 210px);
    height: auto;
}

/* -------------------------------------------------------------------- hero */

.hero {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(1.5rem, 4vh, 2.5rem);
    text-align: center;
}

.hero__copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1rem, 2.6vh, 1.6rem);
}

.eyebrow {
    font-family: var(--font-mono);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #c8f5ef;
}

h1 {
    font-size: clamp(1.75rem, 4.5vw, 2.75rem);
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.12;
    max-width: 20ch;
}

/* The deck sets the closing phrase of the headline in teal. */
h1 em {
    font-style: normal;
    color: var(--teal-text);
}

.hero__lead {
    max-width: 39ch;
    font-weight: 400;
    color: rgba(255, 255, 255, .92);
}

/* --------------------------------------------------------------------- cta */

.cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    margin-top: .4rem;
}

.download-btn {
    display: inline-block;
    line-height: 0;
    border-radius: 8px;
    transition: opacity .2s ease, transform .2s ease;
}

.download-btn img {
    width: 180px;
    height: auto;
}

.download-btn:hover {
    cursor: pointer;
    opacity: .85;
    transform: translateY(-1px);
}

.cta__note {
    font-size: .75rem;
    font-weight: 400;
    letter-spacing: .02em;
    /* >= .69 required for 4.5:1 against this background at 12px */
    color: rgba(255, 255, 255, .78);
}

/* ------------------------------------------------------------ product shot */

.hero__shot {
    line-height: 0;
}

/* No mask and no drop-shadow on the shot.

   Both were attempts to soften the flat crop where the forearm leaves the
   frame, and both produced the same artefact: a drop-shadow traces the alpha
   silhouette and blurs into grey, and a fade makes mid-transition pixels half
   skin over blue, which also composites to grey. Grey against this blue field
   reads as a visible crop edge.

   The fix is to clip rather than blend. See the wide-screen rule below, where
   the shot is anchored to the bottom of the viewport so the cut lands exactly
   on the page edge and cannot be seen. */
.hero__shot {
    display: flex;
    justify-content: center;
    /* Narrow screens: the shot is the last element in the document, and this
       pulls it through the body's bottom padding so its lower edge coincides
       exactly with the end of the document. The forearm's flat crop then sits
       on the page boundary and cannot be scrolled into view. */
    margin-bottom: calc(-1 * clamp(1.25rem, 3vw, 2.5rem));
}

.hero__shot img {
    width: auto;
    max-width: 100%;
    max-height: min(52vh, 460px);
}

/* ---------------------------------------------------------------- features */

.features {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: clamp(1.75rem, 7vw, 2.75rem);
    margin-top: .25rem;
}

.feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    min-width: 4rem;
}

/* Rounded icon chips, as used down the right side of slide 02. */
.feature__icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .1);
}

.feature__icon img {
    width: 26px;
    height: 26px;
}

.feature__label {
    font-size: .875rem;
    font-weight: 500;
    letter-spacing: .01em;
    color: rgba(255, 255, 255, .92);
    line-height: 1.3;
}

/* ----------------------------------------------------------------- 404 */

/* The error page reuses this sheet rather than carrying its own copy of the
   brand background: that gradient already exists twice (here and in
   privacy.css) and a third copy would be a third place to forget. */

.notfound {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    text-align: center;
}

.notfound__code {
    margin: 0;
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #c8f5ef;
}

.notfound h1 {
    margin: 0;
}

.notfound__lead {
    margin: 0;
    max-width: 44ch;
    font-size: 1.05rem;
    color: rgba(255, 255, 255, .88);
}

.notfound__links {
    list-style: none;
    margin: .75rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem 1.75rem;
}

/* ------------------------------------------------------------------ footer */

/* On the pre-launch page the footer carries two items (the n4iT credit and
   the Privacy Policy link); on the download page, only the link. Flex handles
   both, and wraps to two rows on a narrow phone rather than letting the two
   run into each other. Baseline, not center, so the "Powered by" label and the
   link sit on one line. */
.page-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    column-gap: 1.5rem;
    row-gap: .7rem;
    text-align: center;
}

.legal-link {
    color: rgba(255, 255, 255, .72);
    font-size: .8125rem;
    font-weight: 400;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .3);
    padding-bottom: 2px;
    transition: color .2s ease, border-color .2s ease;
}

.legal-link:hover {
    color: #fff;
    border-bottom-color: #fff;
}

/* ------------------------------------------------------ wide: side by side */

@media (min-width: 56rem) {
    .hero {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: clamp(2rem, 5vw, 4rem);
        text-align: left;
    }

    .hero__copy {
        align-items: flex-start;
        flex: 1 1 24rem;
    }

    .hero__copy h1 {
        font-size: clamp(2.25rem, 4vw, 3rem);
        max-width: 15ch;
    }

    .hero__lead {
        /* 39ch, not 36ch: at 36ch the lead broke to four lines. Measured from
           414px up, 39ch holds it to three at every width and still leaves the
           column clear of the product shot at 960px, where the two are closest. */
        max-width: 39ch;
        font-size: 1.0625rem;
    }

    .cta {
        align-items: flex-start;
    }

    .hero__shot {
        flex: 0 1 26rem;
        display: flex;
        justify-content: flex-end;
    }

    /* Portrait image: bound it by height so the footer link stays on screen
       on short laptops rather than being pushed below the fold. */
    .hero__shot img {
        max-height: min(70vh, 600px);
    }
}

/* Anchor the shot to the bottom of the viewport so the forearm's flat crop is
   clipped by the page edge instead of being faded out. Fixed positioning keeps
   it out of flow, so extending past the fold adds no scrollbar. Only applied
   where the layout is known to fit one screen; below that it stays in flow. */
@media (min-width: 56rem) and (min-height: 34rem) {
    .hero {
        position: relative;
    }

    .hero__shot {
        position: fixed;
        right: max(clamp(1.25rem, 3vw, 2.5rem), calc((100vw - 68rem) / 2));
        bottom: 0;
        z-index: 0;
        pointer-events: none;
    }

    .hero__shot img {
        max-height: none;
        height: min(84vh, 760px);
    }

    .brand,
    .hero__copy,
    .page-footer {
        position: relative;
        z-index: 1;
    }

    .brand {
        text-align: left;
    }

    .page-footer {
        text-align: left;
        justify-content: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: .001ms !important;
    }
}

/* ===========================================================================
   PRE-LAUNCH: interest form (pre-lancamento.html only)

   Everything below is additive and scoped to classes that appear on no other
   page, so index.html renders exactly as it did before.

   The form is built from the page's own vocabulary rather than a generic
   input-plus-button: the field sits in the same translucent rounded chip used
   by the feature icons, and the confirmation reuses that chip outright. The
   mono face already carrying the eyebrow labels the field, which suits a
   product about logging measurements.
   ========================================================================= */

/* .done and .interest are display:flex below, which would otherwise defeat the
   hidden attribute the script toggles. */
[hidden] {
    display: none !important;
}

.interest {
    width: 100%;
    max-width: 27rem;
    margin-top: .4rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    /* Legal text and a field label read badly centred, so this block opts out
       of the hero's centred alignment on narrow screens. */
    text-align: left;
}

/* display:flex on .interest and .done would defeat the [hidden] attribute the
   submit handler toggles (author display beats the UA's [hidden] rule), so
   restate it explicitly: without this the success box shows on page load. */
.interest[hidden],
.done[hidden] {
    display: none;
}

.interest__label {
    font-family: var(--font-mono);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #c8f5ef;
}

/* The capsule: one chip holding field and action, so the pair reads as a
   single control rather than two competing objects. */
.interest__field {
    display: flex;
    gap: .4rem;
    padding: .3125rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .18);
    transition: border-color .2s ease, background-color .2s ease;
}

.interest__field:focus-within {
    background: rgba(255, 255, 255, .17);
    border-color: rgba(0, 219, 219, .55);
}

.is-invalid .interest__field {
    border-color: rgba(255, 180, 168, .7);
}

.interest__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: .6rem .5rem .6rem .85rem;
    font: inherit;
    font-size: 1rem;
    color: #fff;
    background: none;
    border: 0;
    border-radius: 11px;
}

.interest__input::placeholder {
    color: rgba(255, 255, 255, .66);
}

.interest__input:focus {
    outline: none;
}

.interest__field:focus-within .interest__input:focus-visible {
    outline: none;
}

/* The one saturated solid on the page. Everything else is translucent, so the
   action is the only thing that looks pressable. */
.interest__submit {
    flex: 0 0 auto;
    padding: .6rem 1.15rem;
    font: inherit;
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: .005em;
    white-space: nowrap;
    /* 4.76:1 against the mint fill */
    color: var(--blue-700);
    background: var(--mint-400);
    border: 0;
    border-radius: 11px;
    cursor: pointer;
    transition: background-color .2s ease, transform .2s ease, opacity .2s ease;
}

.interest__submit:hover {
    background: #2ae8e8;
    transform: translateY(-1px);
}

.interest__submit:active {
    transform: translateY(0);
}

.interest__submit:disabled {
    cursor: progress;
    opacity: .7;
    transform: none;
}

.interest__error {
    /* 4.6:1 against the background field. Red would disappear into the blue. */
    color: #ffb4a8;
    font-size: .8125rem;
    line-height: 1.45;
}

/* Honeypot: parked off-canvas rather than display:none, which the simpler
   bots detect. Humans never see or tab into it. */
.interest__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ----------------------------------------------------------- rgpd: consent */

.consent {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
}

.consent__box {
    flex: 0 0 auto;
    /* Native box, restyled. Keeps the keyboard behaviour and the announcement
       a div-with-role imitation would lose. */
    appearance: none;
    -webkit-appearance: none;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: .15rem;
    border: 1.5px solid rgba(255, 255, 255, .45);
    border-radius: 5px;
    background: rgba(255, 255, 255, .1);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.consent__box:hover {
    border-color: rgba(255, 255, 255, .7);
}

.consent__box:checked {
    background: var(--mint-400);
    border-color: var(--mint-400);
}

.consent__box:checked::after {
    content: "";
    display: block;
    width: .3rem;
    height: .55rem;
    margin: .06rem auto 0;
    border: solid var(--blue-700);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.is-invalid .consent__box:not(:checked) {
    border-color: rgba(255, 180, 168, .8);
}

/* The consent sentence and the RGPD disclosure trigger share one paragraph,
   so the trigger runs on straight after the sentence's full stop instead of
   opening a line of its own. */
.consent__body {
    font-size: .8125rem;
    line-height: 1.5;
}

.consent__label {
    display: inline;
    color: rgba(255, 255, 255, .86);
    cursor: pointer;
}

/* -------------------------------------------------------- rgpd: disclosure */

/* Inline so the summary can sit inside the consent paragraph. The open panel
   stays a block: a block inside an inline box splits the line and lands
   underneath, which is exactly the behaviour wanted here. */
.rgpd {
    display: inline;
}

.rgpd__summary {
    display: inline;
    list-style: none;
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .3);
    padding-bottom: 2px;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease;
}

.rgpd__summary::-webkit-details-marker {
    display: none;
}

.rgpd__summary:hover {
    color: #fff;
    border-bottom-color: #fff;
}

.rgpd__summary::after {
    content: " +";
    font-family: var(--font-mono);
}

.rgpd[open] .rgpd__summary::after {
    content: " −";
}

.rgpd__body {
    margin-top: .8rem;
    padding: .9rem 1rem;
    border-radius: 12px;
    background: rgba(11, 74, 136, .38);
    border: 1px solid rgba(255, 255, 255, .12);
    font-size: .75rem;
    line-height: 1.55;
}

.rgpd__body dt {
    font-family: var(--font-mono);
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #c8f5ef;
}

.rgpd__body dd {
    margin: .2rem 0 .7rem;
    color: rgba(255, 255, 255, .84);
}

.rgpd__body dd:last-child {
    margin-bottom: 0;
}

.rgpd__mail {
    color: #c8f5ef;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color .2s ease;
}

.rgpd__mail:hover {
    color: #fff;
}

/* ------------------------------------------------------------ confirmation */

.done {
    width: 100%;
    max-width: 27rem;
    margin-top: .4rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .55rem;
    text-align: left;
    animation: done-in .34s ease-out both;
}

@keyframes done-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* Same chip as the feature icons, so the confirmation is recognisably part of
   this page rather than a generic success toast. */
.done__mark {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: var(--mint-400);
    background: rgba(0, 219, 219, .16);
    border: 1px solid rgba(0, 219, 219, .34);
}

.done__title {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.done__text {
    max-width: 34ch;
    font-size: .875rem;
    color: rgba(255, 255, 255, .86);
}

.done:focus-visible {
    outline: 2px solid var(--mint-400);
    outline-offset: 8px;
    border-radius: 8px;
}

/* --------------------------------------------------- narrow: stack the pair */

@media (max-width: 30rem) {
    .interest__field {
        flex-direction: column;
    }

    .interest__submit {
        padding-block: .7rem;
    }
}

@media (min-width: 56rem) {
    /* The phone shot is anchored bottom-right from here up; keep the form
       clear of it. */
    .interest,
    .done {
        max-width: 25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .done {
        animation: none;
    }
}

/* ------------------------------------------------------------ powered by */

.powered {
    display: inline-flex;
    /* Baseline, not center: the wordmark's strokes all terminate on one line,
       and that line is the bottom of the trimmed viewBox. Aligned by baseline
       the mark sits on the text's line instead of hanging 6px below it. */
    align-items: baseline;
    gap: .55rem;
    text-decoration: none;
    transition: opacity .2s ease;
}

.powered__label {
    font-family: var(--font-mono);
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    /* 5.7:1 against the background. A quiet credit is still text to be read. */
    color: rgba(255, 255, 255, .82);
}

.powered__logo {
    display: block;
    width: auto;
    height: 18px;
    opacity: .88;
}

.powered:hover .powered__label {
    color: #fff;
}

.powered:hover .powered__logo {
    opacity: 1;
}