/* The site's other pages in the home page's style (2026-11-06): sign-in (login-en / -fr.html), sign-up (signup-en / -fr),
   the account form (register-en / -fr) and the legal pages (legal-disclaimer, website-terms-and-conditions,
   privacy-policy). Loaded after irwin-base.css, whose header and language button they share (the colours: css/irwin-colors.css):
     - the home page's header: the logo, the page's language under it (a word), Sign up / Login and, at the far right,
       the other language (its flag when pointed at)
     - the welcome's light background, one style of page title (an orange line under it)
     - cards with fine lines and rounded corners that lift a little when pointed at, as the home page's
     - the home page's footer band at the bottom (the legal pages, the address, the copyright)
   The light and dark themes share the layout; the dark colours are css/irwin-colors.css's. */

body.irwin-page { display: flex; flex-direction: column; min-height: 100vh; margin: 0;
    background: radial-gradient(800px 360px at 85% 0, rgba(var(--ih-orange-rgb), .09), transparent 70%) no-repeat,
                linear-gradient(180deg, var(--ih-band), var(--ih-page) 560px) no-repeat;
    background-color: var(--ih-page); color: var(--ih-text); }
html[data-theme="dark"] body.irwin-page { background-color: var(--ih-page); }
/* the page under the header (fixed, 90px high); the footer at the bottom of the window on short pages */
.irwin-page .section-5, .irwin-page .section-4 { flex: 1 0 auto; margin: 0; padding: 128px 0 72px; background: none; text-align: center; }
html[data-theme="dark"] .irwin-page .section-4 { background: none; }
/* (no menu on these pages: no menu button on narrow screens) */
.irwin-page .menu .w-nav-button { display: none; }

/* the page's title: as the home page's section titles */
.irwin-page .irwin-page-title { margin: 0 auto 30px; font: 700 34px/1.2 Lato, sans-serif; letter-spacing: 0; color: var(--ih-text); text-align: center; }
.irwin-page .irwin-page-title:after { content: ""; display: block; width: 56px; height: 4px; margin: 14px auto 0; border-radius: 4px; background: var(--ih-orange); }
html[data-theme="dark"] .irwin-page .irwin-page-title { color: var(--ih-text); }
.irwin-page .irwin-page-lead { max-width: 620px; margin: -8px auto 30px; font: 400 17px/1.6 Lato, sans-serif; color: var(--ih-muted); text-align: center; }
html[data-theme="dark"] .irwin-page .irwin-page-lead { color: var(--ih-muted); }

/* back to the home page (sign-up): an outlined button above the title */
.irwin-page .irwin-back { position: static; display: inline-flex; align-items: center; gap: 6px; margin: 0 0 18px; padding: 7px 14px;
    border: 1px solid var(--ih-card-line); border-radius: var(--ih-radius-button); background: var(--ih-card); color: var(--ih-text);
    font: 700 14px/1 Lato, sans-serif; letter-spacing: .3px; text-decoration: none; box-shadow: var(--ih-shadow);
    transition: border-color .15s ease-out, color .15s ease-out, background-color .15s ease-out, transform .08s ease-out; }
.irwin-page .irwin-back:hover, .irwin-page .irwin-back:focus-visible { border-color: var(--ih-orange); background: var(--ih-card); color: var(--ih-orange); }
.irwin-page .irwin-back:active { transform: translateY(1px); }
.irwin-page .irwin-back-row { max-width: 760px; margin: 0 auto; text-align: left; }

/* sign-in: the form's card is drawn by the ID server's page in the frame (htmliddev/Login.html) */
.irwin-page .html-embed-2-copy { margin: 0 auto; }

/* sign-up, step 1: the plans, cards as the home page's products (the orange line at the top when pointed at) */
.irwin-page .irwin-signup { max-width: 760px; padding: 0 0 8px; }
.irwin-page .irwin-plans { gap: 22px; }
.irwin-page .irwin-plan { box-sizing: border-box; padding: 28px 24px 24px; border: 1px solid var(--ih-card-line); border-top: 3px solid transparent;
    border-radius: var(--ih-radius); background: var(--ih-card); box-shadow: var(--ih-shadow);
    transition: transform .2s ease-out, box-shadow .2s ease-out, border-color .2s ease-out; }
.irwin-page .irwin-plan:hover { transform: translateY(-2px); box-shadow: var(--ih-shadow-up); border-top-color: var(--ih-orange); }
.irwin-page .irwin-plan h2 { margin: 0 0 10px; font: 700 22px/1.3 Lato, sans-serif; color: var(--ih-text); transition: color .2s ease-out; }
.irwin-page .irwin-plan:hover h2 { color: var(--ih-orange); }
.irwin-page .irwin-plan p { font: 400 15px/1.6 Lato, sans-serif; color: var(--ih-muted); }
html[data-theme="dark"] .irwin-page .irwin-plan { background: var(--ih-card); border-color: var(--ih-card-line); border-top-color: transparent; box-shadow: var(--ih-shadow); }
html[data-theme="dark"] .irwin-page .irwin-plan:hover { border-top-color: var(--ih-orange); box-shadow: var(--ih-shadow-up); }
html[data-theme="dark"] .irwin-page .irwin-plan h2 { color: var(--ih-text); }
html[data-theme="dark"] .irwin-page .irwin-plan:hover h2 { color: var(--ih-orange); }
html[data-theme="dark"] .irwin-page .irwin-plan p, html[data-theme="dark"] .irwin-page .irwin-signup .irwin-login { color: var(--ih-muted); }
/* their buttons: the home page's orange button */
.irwin-page .irwin-plan .link-2 { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 18px; border-radius: var(--ih-radius-button);
    font: 700 15px/1.2 Lato, sans-serif; letter-spacing: .4px; box-shadow: 0 6px 16px rgba(var(--ih-orange-rgb), .3); }
.irwin-page .irwin-signup .irwin-login { margin-top: 30px; font: 400 15px/1.6 Lato, sans-serif; color: var(--ih-muted); }

/* the account form (register-*.html): the plan chosen, a tag; the form's card is drawn by the ID server's page in the
   frame (htmliddev/Registration.html) */
.irwin-page #irwinPlanLine { display: inline-block; margin: -6px 0 22px; padding: 6px 14px; border: 1px solid rgba(var(--ih-orange-rgb), .35); border-radius: 999px;
    background: rgba(var(--ih-orange-rgb), .08); font: 400 15px/1.4 Lato, sans-serif; color: var(--ih-text); }
.irwin-page #irwinPlanLine:empty { display: none; }
.irwin-page #irwinPlanLine a { color: var(--ih-orange); font-weight: 700; }
html[data-theme="dark"] .irwin-page #irwinPlanLine { color: var(--ih-text); }
html[data-theme="dark"] .irwin-page #irwinPlanLine a { color: var(--ih-orange-link); }
.irwin-page .html-embed-2 { width: auto; max-width: 600px; height: auto; margin: 0 auto; }

/* the legal pages: the text on a card, its headings with an orange line on their left */
.irwin-page .container-8 { max-width: 900px; padding: 0 20px; text-align: left; }
.irwin-page .legal-title { text-align: center; }
.irwin-legal-card { padding: 34px 42px 10px; border: 1px solid var(--ih-card-line); border-radius: var(--ih-radius); background: var(--ih-card); box-shadow: var(--ih-shadow); }
.irwin-page .legal-gras { margin: 26px 0 8px; padding-left: 12px; border-left: 3px solid var(--ih-orange); font: 700 17px/1.4 Lato, sans-serif; color: var(--ih-text); }
.irwin-page .legal-gras:first-child { margin-top: 0; }
.irwin-page .legal-gras:empty { display: none; }
.irwin-page .legal-txt { margin: 0 0 22px; font: 400 15px/1.75 Lato, sans-serif; color: var(--ih-muted); overflow-wrap: anywhere; }
html[data-theme="dark"] .irwin-page .legal-gras { color: var(--ih-text); }
html[data-theme="dark"] .irwin-page .legal-txt { color: var(--ih-muted); }

/* the footer: the home page's blue-grey band, its legal pages, address and copyright */
.irwin-page-footer { flex: none; padding: 30px 20px 26px; background: linear-gradient(135deg, var(--ih-blue), var(--ih-blue-deep)); text-align: center;
    font: 400 13px/1.6 Lato, sans-serif; color: var(--ih-text); }
.irwin-page-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 26px; margin: 0 0 10px; }
.irwin-page-footer a { color: var(--ih-text); font-weight: 700; letter-spacing: .6px; text-decoration: none; transition: color .15s ease-out; }
.irwin-page-footer a:hover, .irwin-page-footer a:focus-visible { color: var(--ih-orange); }
.irwin-page-footer p { margin: 0; color: var(--ih-muted); }
html[data-theme="dark"] .irwin-page-footer a:not([class]) { color: var(--ih-text); }
html[data-theme="dark"] .irwin-page-footer a:not([class]):hover { color: var(--ih-orange-link); }

@media (max-width: 767px) {
    .irwin-page .irwin-page-title { font-size: 28px; }
    .irwin-legal-card { padding: 24px 20px 6px; }
}
@media (max-width: 640px) {
    .irwin-page .section-5, .irwin-page .section-4 { padding-top: 170px; }   /* (the header is two lines high there) */
}
@media (prefers-reduced-motion: reduce) {
    .irwin-page .irwin-plan, .irwin-page .irwin-back { transition: none; }
    .irwin-page .irwin-plan:hover { transform: none; }
}

/* a short window (a quarter of the screen, or its top or bottom half; 2026-11-06): the header is lower there
   (irwin-base.css), the page under it closer, the title smaller, so that the form shows */
@media (max-height: 620px) and (min-width: 641px) {
    .irwin-page .section-5, .irwin-page .section-4 { padding-top: 92px; padding-bottom: 36px; }
    .irwin-page .irwin-page-title { margin-bottom: 18px; font-size: 28px; }
    .irwin-page .irwin-page-title:after { margin-top: 8px; }
    .irwin-page .irwin-page-lead { margin-bottom: 18px; }
    .irwin-page .irwin-back { margin-bottom: 10px; }
    .irwin-page #irwinPlanLine { margin-bottom: 14px; }
    .irwin-page-footer { padding: 18px 20px 16px; }
}