/* Website only. Keep application themes and original marketing styles intact. */
@font-face{font-family:Inter;font-style:normal;font-weight:400 900;font-display:swap;src:url('/assets/inter-v20-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-style:normal;font-weight:400 900;font-display:swap;src:url('/assets/inter-v20-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
.tm-audit-downloads{margin:1.25rem 0;max-width:100%;gap:12px!important}
.tm-audit-downloads a{display:flex;align-items:center;justify-content:center;min-height:48px;max-width:100%;border-radius:8px}
.tm-audit-downloads img{max-width:100%;object-fit:contain;margin-inline:0}
.tm-audit-downloads a:focus-visible{outline:3px solid #f4b942;outline-offset:4px}
footer .tm-audit-downloads{margin-top:12px}
.tm-audit-404{width:min(42rem,calc(100% - 2rem));margin:clamp(2rem,8vw,6rem) auto;padding:clamp(1.25rem,4vw,3rem);border:1px solid #dde5d7;border-radius:24px;background:#fffaf0;color:#172019;font-family:Inter,system-ui,sans-serif}
.tm-audit-404 h1{font-size:clamp(1.8rem,6vw,3rem);font-weight:800;line-height:1.1;margin:1rem 0}
.tm-audit-404 p{line-height:1.6;margin:1rem 0}
.tm-audit-404 nav{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.tm-audit-404 nav a{display:inline-flex;align-items:center;min-height:48px;padding:10px 18px;border-radius:10px;color:white;background:#286f2c;text-decoration:none;font-weight:700}
.tm-audit-404 nav a:focus-visible{outline:3px solid #c57600;outline-offset:4px}
.tm-audit-404 img{width:64px;height:64px;object-fit:contain}
@media(max-width:380px){.tm-audit-downloads{gap:8px!important}.tm-audit-downloads a{flex:0 1 auto}.tm-audit-downloads img{max-width:137px}}

/* Homepage hero, approved variant A (2026-10-17).
 * Only this hero uses the offset phone. The other phone mockups are unchanged.
 * Keep the photograph in a 3:2 frame and reserve the phone's full height in the
 * grid, rather than clipping the phone or borrowing space from the next section.
 */
.tm-hero .tm-hero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, .98fr);
  column-gap: 76px;
}

.tm-hero .tm-hero-visual {
  --tm-hero-phone-width: 206px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  width: 100%;
  max-width: 660px;
  height: auto;
  min-width: 0;
  justify-self: end;
  isolation: isolate;
}

.tm-hero .tm-family-photo {
  position: relative;
  inset: auto;
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 70% 50%;
  opacity: 1;
}

.tm-hero .tm-hero-visual > .tm-phone {
  position: relative;
  inset: auto;
  grid-area: 1 / 1;
  width: var(--tm-hero-phone-width);
  height: auto;
  aspect-ratio: auto;
  /* Vertical percentage margins resolve against the photo's width: 14.67%
   * equals 22% of the height of a 3:2 photo. */
  margin: 14.6667% 0 10px -42px;
  border-width: 6px;
  border-radius: 32px;
  transform: rotate(-4deg);
  transform-origin: center;
}

.tm-hero .tm-phone-screen {
  position: relative;
  inset: auto;
  width: 100%;
  padding-top: 24px;
  border-radius: 25px;
}

.tm-hero .tm-phone-screen img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 390 / 844;
  object-fit: contain;
  object-position: center;
}

.tm-hero .tm-phone-island {
  top: 5px;
  width: 58px;
  height: 16px;
}

.tm-hero .tm-note-calendar {
  top: 20px;
  right: auto;
  bottom: auto;
  left: 40%;
}

.tm-hero .tm-note-task {
  top: 0;
  right: -6px;
  bottom: auto;
  left: auto;
  /* Anchor to the photograph, not to the taller phone-containing grid. */
  margin-top: calc(66.6667% - 22px);
}

@media (min-width: 768px) and (max-width: 1023px) {
  .tm-hero .tm-hero-grid {
    width: calc(100% - 64px);
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
    min-height: auto;
    padding: 40px 0 42px;
  }

  .tm-hero .tm-hero-copy {
    width: 100%;
    max-width: 720px;
    justify-self: center;
  }

  .tm-hero .tm-hero-copy h1 {
    max-width: 100%;
    font-size: clamp(44px, 5.3vw, 54px);
  }

  .tm-hero .tm-hero-visual {
    --tm-hero-phone-width: 170px;
    width: calc(100% - 52px);
    max-width: 660px;
    justify-self: end;
  }
}

/* Leave room for the existing floating Facebook tab on small desktops. */
@media (min-width: 1024px) and (max-width: 1100px) {
  .tm-hero .tm-note-task { right: 32px; }
}

@media (max-width: 767px) {
  .tm-hero .tm-hero-grid {
    width: calc(100% - 36px);
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    min-height: auto;
    padding: 46px 0 34px;
  }

  .tm-hero .tm-hero-copy h1 {
    max-width: 100%;
    font-size: clamp(38px, 11.5vw, 50px);
  }

  .tm-hero .tm-hero-visual {
    --tm-hero-phone-width: 225px;
    grid-template-rows: auto auto;
    row-gap: 38px;
    max-width: 540px;
    justify-self: center;
  }

  .tm-hero .tm-family-photo {
    grid-area: 1 / 1;
    border-radius: 26px;
  }

  .tm-hero .tm-hero-visual > .tm-phone {
    grid-area: 2 / 1;
    justify-self: center;
    margin: 0 0 10px;
    transform: none;
  }

  .tm-hero .tm-floating-note {
    padding: 9px 10px;
    font-size: 10px;
  }

  .tm-hero .tm-note-calendar {
    top: 8px;
    left: 8px;
  }

  .tm-hero .tm-note-task {
    right: 0;
    margin-top: calc(66.6667% - 16px);
  }
}