:root {
    color-scheme: light;
    --navy: #081a50;
    --copy: #404a82;
    --blue: #0078f6;
    --border: #dcebf3;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--navy); background: #fff; font-family: "Nunito Sans", Arial, Helvetica, sans-serif; }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button[aria-disabled="true"] { cursor: default; }
a { color: inherit; }
img { display: block; max-width: 100%; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid #884ee7; outline-offset: 4px; }
.icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.filled-icon { fill: currentColor; stroke: none; }
.white-stroke { stroke: white; }
.sr-only, .skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 10; padding: 12px; background: #fff; }
.site-shell { max-width: 1600px; margin: 0 auto; overflow: hidden; background: radial-gradient(ellipse at 50% 57%, #fff 20%, #f4fbff 100%); }
.page-width { width: calc(100% - 92px); max-width: 1440px; margin-inline: auto; }
.site-header { height: 71px; position: relative; z-index: 5; background: linear-gradient(100deg, #fff 74%, #edfaff); }
.header-inner { height: 100%; display: flex; align-items: center; gap: 72px; }
.brand { flex: 0 0 323px; margin-left: -3px; }
.brand img { width: 323px; height: 68px; object-fit: contain; }
.main-nav { display: flex; align-items: center; gap: 36px; white-space: nowrap; }
.main-nav .nav-link { padding: 8px 5px 6px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--navy); text-decoration: none; font-size: 16px; font-weight: 600; }
.main-nav .nav-link { position: relative; display: flex; align-items: center; justify-content: center; transition: color 180ms ease; }
.main-nav .nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: currentColor; transform: scaleX(0); transition: transform 180ms ease; }
.main-nav .nav-link[aria-current="page"] { color: var(--blue); }
.main-nav .nav-link[aria-current="page"]::after { transform: scaleX(1); }
.main-nav .nav-link:hover, .main-nav .nav-link:focus-visible { color: #0064d5; }
.main-nav .nav-link:hover::after, .main-nav .nav-link:focus-visible::after, .apps-toggle[aria-expanded="true"]::after { transform: scaleX(1); }
.apps-dropdown { position: relative; z-index: 5; }
.apps-toggle { display: flex; align-items: center; gap: 5px; }
.nav-chevron { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.apps-toggle[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }
.apps-menu { position: absolute; top: calc(100% + 6px); left: 0; width: 200px; max-width: calc(100vw - 32px); margin: 0; padding: 6px; list-style: none; border: 1px solid var(--border); border-radius: 13px; background: #fff; box-shadow: 0 8px 24px #081a5020; }
.apps-menu::before { content: ""; position: absolute; top: -7px; left: 0; width: 100%; height: 7px; }
.apps-menu[hidden] { display: none; }
.apps-menu a { display: flex; align-items: center; min-height: 44px; padding: 10px; border-radius: 8px; color: var(--navy); font-size: 14px; font-weight: 600; text-decoration: none; transition: color 150ms ease, background-color 150ms ease; }
.apps-menu a:hover, .apps-menu a:focus-visible { color: #0064d5; background: #eaf5ff; }
@media (prefers-reduced-motion: reduce) {
    .main-nav .nav-link, .main-nav .nav-link::after, .apps-menu a { transition: none; }
}
.language-selector { position: relative; z-index: 4; margin-left: auto; margin-right: 44px; flex-shrink: 0; }
.language-toggle { display: flex; align-items: center; justify-content: center; gap: 9px; width: 72px; min-height: 44px; padding: 8px; border: 1px solid #c9d8eb; border-radius: 13px; background: #fff; color: var(--navy); }
.language-toggle img { border-radius: 2px; }
.language-toggle:hover, .language-toggle[aria-expanded="true"] { background: #edf6ff; border-color: var(--blue); }
.language-chevron { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.language-toggle[aria-expanded="true"] .language-chevron { transform: rotate(180deg); }
.language-options { position: absolute; top: calc(100% + 6px); right: 0; width: 200px; max-width: calc(100vw - 32px); margin: 0; padding: 6px; list-style: none; border: 1px solid var(--border); border-radius: 13px; background: #fff; box-shadow: 0 8px 24px #081a5020; }
.language-options[hidden] { display: none; }
.language-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; padding: 10px; border: 0; border-radius: 8px; background: transparent; color: var(--navy); text-align: left; font-size: 14px; }
.language-option[aria-current="true"] { background: #eaf5ff; color: #0064d5; font-weight: 700; }
.header-palm { position: absolute; top: 0; right: 0; z-index: 3; pointer-events: none; mix-blend-mode: multiply; }
.hero { height: 283px; position: relative; background: linear-gradient(175deg, #edfaff 0%, #fff 45%, #fff 75%, #f7fcff); }
.hero-content { position: relative; z-index: 2; padding-top: 32px; }
.eyebrow { margin: 0 0 3px; color: #005ac4; font-size: 12px; line-height: 18px; font-weight: 600; letter-spacing: 3.3px; text-transform: uppercase; }
h1 { margin: 0; font-size: 46px; letter-spacing: -1.5px; line-height: 1.08; font-weight: 1000; }
.hero-description { margin: 5px 0 0; font-size: 21px; line-height: 28px; color: var(--copy); }
.benefits { list-style: none; display: flex; gap: 9px; margin: 20px 0 0; padding: 0; }
.benefits li { display: flex; align-items: center; justify-content: center; gap: 9px; height: 46px; padding: 0 14px; border-radius: 18px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.benefits .icon { width: 28px; height: 28px; }
.benefit-free { background: #dcf7ed; color: #003b50; }
.benefit-free .icon { color: #00991b; }
.benefit-adverts { background: #ffe5eb; color: #c6002a; }
.benefit-adverts .icon { color: #ed254a; }
.benefit-safe { background: #def4ff; }
.benefit-safe .icon { color: #0764cb; }
.benefit-nice { background: #f1e5fd; }
.benefit-nice .icon { color: #8d2ce1; }
.benefit-school { background: #fff5c5; }
.benefit-school .icon { color: #005b91; }
.french-flag { width: 16px; height: 14px; flex-shrink: 0; border-radius: 2px; background: linear-gradient(90deg, #074dad 33%, #fff 33% 66%, #eb3b4e 66%); margin-left: -4px; }
.hero-art { position: absolute; right: 0; top: 0; width: 756px; height: 283px; pointer-events: none; }
.hero-art img { position: absolute; max-width: none; }
.hero-family { right: 136px; top: -9px; aspect-ratio: 322 / 292; mix-blend-mode: multiply; }
.hero-riviera { right: 0; top: 3px; mix-blend-mode: multiply; }
.hero-handwriting { right: 425px; top: 17px; mix-blend-mode: multiply; }
.hero-coast { left: 0; bottom: 0; mask-image: linear-gradient(90deg, transparent, #000 40%); }
.apps-section { position: relative; z-index: 2; padding-top: 20px; }
.app-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.app-card { display: grid; grid-template-columns: minmax(0, 1fr) 181px; gap: 20px; padding: 16px 18px 14px; border: 1px solid var(--border); border-radius: 15px; background: #ffffffed; box-shadow: 0 7px 20px #b7d5e512; min-width: 0; }
.app-information { min-width: 0; }
.app-summary { display: flex; gap: 19px; min-height: 102px; }
.app-icon { width: 90px; height: 90px; flex-shrink: 0; border-radius: 21px; }
.app-copy { padding-top: 3px; }
.app-copy h3 { font-size: 20.5px; line-height: 26px; letter-spacing: -.6px; margin: 0 0 2px; font-weight: 900; }
.app-copy p { margin: 0; font-size: 14px; line-height: 16.5px; color: var(--copy); max-width: 285px; }
.app-screens { width: 100%; height: auto; aspect-ratio: 435 / 159; object-fit: contain; }
/* Preserve the accepted 435x159 strip: four 94x157 frames, 19px gaps.
   Container units scale the bezel, inset and corners with the entire strip. */
.app-phone-strip { position: relative; container-type: inline-size; }
.app-phone { position: absolute; top: .628931%; bottom: .628931%; width: 21.609195%; border: calc(.344828cqw * var(--phone-scale, 1)) solid #7d898d; border-radius: calc(3.218391cqw * var(--phone-scale, 1)); padding: calc(.574713cqw * var(--phone-scale, 1)); background: #081015; box-shadow: 0 0 calc(.229885cqw * var(--phone-scale, 1)) calc(.114943cqw * var(--phone-scale, 1)) #c6cfd2; }
.app-phone:nth-child(1) { left: .229885%; }
.app-phone:nth-child(2) { left: 26.206897%; }
.app-phone:nth-child(3) { left: 52.183908%; }
.app-phone:nth-child(4) { left: 78.160920%; }
.app-phone__screen { display: flex; justify-content: center; width: 100%; height: 100%; overflow: hidden; border-radius: calc(2.298851cqw * var(--phone-scale, 1)); background: #f7f9ff; }
.app-phone__screen img { width: auto; height: 100%; aspect-ratio: 9 / 20; object-fit: contain; }
/* A single static phone uses the same frame, scaled from a 94px phone rather
   than its usual 435px strip container. The strip's default scale stays 1. */
.app-phone-figure { position: relative; container-type: inline-size; aspect-ratio: 94 / 157; }
.app-phone-figure > .app-phone { --phone-scale: 4.627659574; inset: 0; width: 100%; }
/* Synthetic teasers can crop vertically to fill the screen; real UI stays complete. */
.app-phone--teaser .app-phone__screen img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.app-actions { border-left: 1px solid var(--border); margin: 9px 0 4px; padding-left: 17px; display: flex; flex-direction: column; justify-content: end; gap: 9px; padding-bottom: 28px; }
.app-age { margin: 0 0 auto; color: var(--copy); font-size: 14px; line-height: 20px; font-weight: 400; text-align: center; }
.button { width: 100%; min-height: 44px; border: 1px solid var(--blue); border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 13px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.play-icon { width: 21px; height: 21px; flex-shrink: 0; }
.button-primary { background: linear-gradient(#0788ff, #0069e9); color: #fff; }
/* App actions share their existing geometry; only their primary colour changes. */
.button-install { background: #01875F; border-color: #01875F; }
.button-install:not(:disabled):hover { background: linear-gradient(#136f50, #0f5b42); border-color: #0f5b42; }
.button-install:not(:disabled):focus-visible { outline-color: #126b4e; }
.button-install:not(:disabled):active { background: #0d533c; border-color: #0d533c; }
.button-secondary { background: #fff; color: #006cf0; }
.button-link { text-decoration: none; }
/* Planned state changes only paint and semantics, not the accepted card geometry. */
.app-card--planned { position: relative; background: #f2f5f8; border-color: #dce8f0; box-shadow: none; }
.app-card--planned .app-icon { filter: saturate(.55); opacity: .5; }
.app-card--planned .app-copy h3 { color: #8290ab; }
.app-card--planned .app-copy p, .app-card--planned .app-age { color: #8e9ebb; }
.app-card--planned .app-phone-strip { filter: saturate(.6); opacity: .5; }
.app-card--planned .app-phone { background: #17283e; }
.app-card--planned .app-actions { border-color: #d7e4ee; }
.app-card--planned .button:disabled { cursor: default; box-shadow: none; }
.app-card--planned .button-primary:disabled { background: #bdc9d7; border-color: #bdc9d7; color: #fff; }
.app-card--planned .button-secondary:disabled { background: transparent; border-color: #c2cfdf; color: #a0b1ca; }
.app-planned-ribbon { position: absolute; top: -1px; right: -1px; width: 86px; height: 86px; overflow: hidden; pointer-events: none; z-index: 1; }
.app-planned-ribbon span { position: absolute; top: 15.91px; right: -29.24px; width: 122.12px; height: 31.82px; display: flex; align-items: center; justify-content: center; transform: rotate(45deg); background: #7b8ba4; color: #fff; font-size: 15px; line-height: 1; font-weight: 800; }
@media (max-width: 1399px) {
    .app-planned-ribbon { width: 80px; height: 80px; }
    .app-planned-ribbon span { top: 14.8px; right: -27.2px; width: 113.6px; height: 29.6px; font-size: 13px; }
}
@media (max-width: 900px) {
    /* Compact cards leave less empty corner space beside the unchanged copy. */
    .app-planned-ribbon { width: 52px; height: 52px; }
    .app-planned-ribbon span { top: 9.62px; right: -17.68px; width: 73.84px; height: 19.24px; font-size: 11px; }
}
.site-footer { position: relative; height: 67px; display: flex; align-items: center; justify-content: center; background: linear-gradient(#fff, #fff 64%, #e4f8ff); }
.site-footer > img { position: absolute; bottom: 0; mix-blend-mode: multiply; z-index: 3; }
.footer-coast-left { aspect-ratio: 275 / 96; left: 0; mask-image: linear-gradient(to right, #000 88%, transparent); }
.footer-coast-right { aspect-ratio: 260 / 96; right: 0; mask-image: linear-gradient(to left, #000 88%, transparent); }
.site-footer .footer-note-nice { left: 19.2%; bottom: 17px; }
.site-footer .footer-note-learning { right: 19.1%; bottom: 17px; }
.footer-motto { position: relative; font-size: 7px; font-weight: 600; color: #7785b4; letter-spacing: 4px; line-height: 13px; text-align: center; text-transform: uppercase; margin: 0 28px 0 0; }
.footer-sun { position: absolute; width: 42px; height: 43px; max-width: none; left: calc(100% + 10px); top: -8px; }
@media (min-width: 1400px) {
    /* Desktop reference: preserve the text line boxes while aligning artwork at native size. */
    .main-nav { gap: 32px; }
    :lang(en) .eyebrow { letter-spacing: 3.1px; }
    :lang(en) h1 { font-size: 46.5px; letter-spacing: -1.95px; line-height: 1.07; }
    :lang(en) .hero-description { margin-top: 7px; letter-spacing: -.15px; }
    :lang(en) .benefits { margin-top: 18px; }
    .app-card { padding-top: 15px; padding-left: 17px; }
    .app-copy { padding-top: 2px; }
    .app-copy h3 { font-size: 21px; letter-spacing: -1px; margin-bottom: 3px; }
    .app-summary { min-height: 103px; }
    .app-screens { width: calc(100% + 2px); max-width: none; margin-left: -1px; }
    .benefits li { padding-inline: 10px; font-size: 13px; }
    .benefit-free { width: 167px; }
    .benefit-adverts { width: 130px; }
    .benefit-safe { width: 135px; }
    .benefit-nice { width: 189px; }
    .benefits .benefit-nice { font-size: 12px; gap: 6px; }
    .benefit-nice .icon { width: 23px; }
    .benefit-school { width: 210px; }
    .app-card:nth-child(odd) .app-copy p { max-width: 250px; }
    .app-card:nth-child(even) .app-copy p { max-width: 300px; }
    .app-card:nth-child(-n+2) { min-height: 293px; }
    .app-card:nth-child(n+3) { min-height: 281px; padding-bottom: 7px; }
    /* Use 2px of existing space below the copy for the shared 159px strip. */
    .app-card:nth-child(n+3) .app-summary { min-height: 98px; }
    .app-card:nth-child(n+3) .app-actions { padding-bottom: 26px; }
}
@media (max-width: 1399px) {
    .header-inner { gap: 30px; }
    .main-nav { gap: 20px; }
    .language-selector { margin-right: 15px; }
    h1 { font-size: 39px; max-width: 700px; }
    .hero-art { opacity: .85; right: -75px; }
    .hero-description { font-size: 19px; }
    .benefits { gap: 7px; }
    .benefits li { padding: 0 10px; font-size: 12px; }
    .app-card { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .app-actions { border-left: 0; border-top: 1px solid var(--border); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px 0 0; margin: 0; }
    .app-age { grid-column: 1 / -1; margin: 0; }
    .app-summary { min-height: 108px; }
    .app-copy p { max-width: none; }
}
@media (max-width: 1100px) {
    .page-width { width: calc(100% - 48px); }
    .site-header { height: auto; }
    .header-inner { flex-wrap: wrap; gap: 6px 25px; padding-bottom: 10px; }
    .brand { flex-basis: 280px; }
    .header-palm { width: 50px; height: auto; }
    .brand img { width: 280px; height: 62px; }
    .main-nav { order: 3; width: 100%; justify-content: center; }
    .language-selector { margin-right: 35px; }
    .main-nav .nav-link { min-height: 44px; }
    .hero { height: auto; display: flex; flex-direction: column; }
    .hero-content { padding-top: 25px; }
    h1 { font-size: 38px; }
    .benefits { flex-wrap: wrap; }
    .hero-art { position: relative; align-self: end; right: 0; margin-top: 22px; width: 756px; max-width: 100%; order: 2; opacity: 1; }
    .hero-coast { display: none; }
    .app-summary { gap: 12px; min-height: 156px; }
    .app-icon { width: 72px; height: 72px; }
    .app-copy h3 { font-size: 19px; line-height: 23px; }
    .app-copy p { font-size: 14px; line-height: 19px; }
    .footer-note-nice, .footer-note-learning { display: none; }
    .footer-coast-left, .footer-coast-right { max-width: 25%; height: auto; }
}
@media (max-width: 620px) {
    .page-width { width: calc(100% - 32px); }
    .header-inner { justify-content: space-between; gap: 2px 8px; padding-bottom: 6px; }
    .brand { flex: 1; min-width: 0; }
    .brand img { width: 250px; height: 56px; object-position: left center; }
    .header-palm { width: 50px; height: auto; }
    .language-selector { margin: 0; }
    .language-toggle { width: 64px; }
    .main-nav { gap: 12px; }
    .main-nav .nav-link { font-size: 14px; padding-inline: 3px; }
    .hero-content { padding-top: 20px; }
    h1 { font-size: 33px; line-height: 1.16; letter-spacing: -1.3px; }
    .eyebrow { font-size: 10px; letter-spacing: 1.8px; margin-bottom: 8px; }
    .hero-description { font-size: 17px; line-height: 25px; }
    .hero-description br { display: none; }
    .benefits { margin-top: 16px; }
    .benefits li { font-size: 11px; height: 39px; gap: 6px; }
    .benefits .icon { width: 23px; height: 23px; }
    .hero-art { height: 210px; width: 100%; margin-top: 12px; overflow: hidden; }
    .hero-family { right: 0; width: 233px; height: auto; top: auto; bottom: 0; }
    .hero-riviera { display: none; }
    .hero-handwriting { width: 104px; height: auto; left: 5px; top: 12px; }
    .app-grid { grid-template-columns: 1fr; gap: 16px; }
    .app-card { padding: 14px; }
    .app-summary { min-height: 0; margin-bottom: 14px; }
    .app-actions { gap: 8px; }
    .button { font-size: 13px; gap: 7px; }
    .site-footer { margin-top: 12px; height: 75px; }
    .footer-motto { font-size: 6px; letter-spacing: 2px; }
    .footer-sun { display: none; }
}
/* Short landscape screens retain two cards per row and a compact hero. */
@media (min-width: 621px) and (max-width: 1100px) and (max-height: 500px) {
    .site-header { height: 62px; }
    .header-inner { flex-wrap: nowrap; gap: 20px; padding-bottom: 0; }
    .brand { flex: 0 1 220px; min-width: 0; }
    .brand img { width: 220px; height: 48px; }
    .main-nav { order: 0; width: auto; margin-left: auto; gap: 14px; }
    .main-nav .nav-link { font-size: 14px; padding-inline: 3px; }
    .language-selector { margin: 0; }
    .language-toggle { width: 64px; }
    .hero { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 16px; padding: 18px 24px 0; }
    .hero-content { width: auto; margin: 0; padding: 0; }
    .eyebrow { font-size: 10px; letter-spacing: 2px; }
    h1 { font-size: 32px; line-height: 1.12; }
    .hero-description { font-size: 17px; line-height: 24px; }
    .hero-description br { display: none; }
    .benefits { margin-top: 14px; gap: 6px; }
    .benefits li { height: 38px; font-size: 11px; gap: 6px; }
    .benefits .icon { width: 23px; height: 23px; }
    .hero-art { width: 240px; height: 218px; margin: 0; align-self: end; }
    .hero-family { right: 0; top: auto; bottom: 0; width: 240px; height: auto; }
    .hero-handwriting, .hero-riviera { display: none; }
    .app-summary { min-height: 136px; }
}
/* French copy needs natural wrapping without changing the accepted English layout. */
:lang(fr) .benefits li { width: auto; }
@media (min-width: 1400px) {
    :lang(fr) .app-information { display: flex; flex-direction: column; }
    :lang(fr) .app-screens { margin-top: auto; flex-shrink: 0; }
}
@media (max-width: 620px) {
    :lang(fr) .main-nav { display: grid; grid-template-columns: repeat(2, max-content); gap: 0 24px; }
}
@media (min-width: 1101px) {
    :lang(fr) .hero { height: auto; min-height: 333px; }
    :lang(fr) .hero-content { padding-bottom: 50px; }
    :lang(fr) h1, :lang(fr) .hero-description { max-width: min(820px, calc(100% - 480px)); }
    :lang(fr) .benefits { flex-wrap: wrap; max-width: min(940px, calc(100% - 370px)); }
}